开发者社区> 问答> 正文

使用上传的图片即时更新前端

我有一个类似于Instagram和其他软件的应用程序,可以直接发送消息。当前,当用户输入文本时,它会立即更新UI。当用户试图发送图像时,我遇到了麻烦。它在后端工作,我看到服务器上的图像和数据库中的引用,但是它没有用图像更新UI。相反,它显示一个空行,就像输入了文本一样。我的代码包括在下面。

上传图像功能

func uploadImage(from imageView: UIImageView) {

// save method of accessing ID of current user
guard let id = user?["id"], let uuid = messages["uuid"] else {
    return
}
let recipient = messages["username"] as! String
let rid = String(describing: messages["sender_id"]!)
let sender = user!["username"] as! String
puuid = UUID().uuidString

// STEP 1. Declare URL, Request and Params
// url we gonna access (API)
let url = URL(string: "https://localhost/messagepost.php")!

// declaring reqeust with further configs
var request = URLRequest(url: url)

// POST - safest method of passing data to the server
request.httpMethod = "POST"

// values to be sent to the server under keys (e.g. ID, TYPE)
let params = ["sender_id": id, "uuid": uuid, "sender": sender, "recipient_id": rid, "recipient": recipient, "puuid": puuid]

// MIME Boundary, Header
let boundary = "Boundary-\(NSUUID().uuidString)"
request.setValue("multipart/form-data; boundary=\(boundary)", forHTTPHeaderField: "Content-Type")
let param = ["puuid" : puuid]

// if in the imageView is placeholder - send no picture to the server
// Compressing image and converting image to 'Data' type
var imageData = Data()

if pictureImg.image != nil {
    imageData = pictureImg.image!.jpegData(compressionQuality: 0.5)!
}

// assigning full body to the request to be sent to the server
request.httpBody = Helper().body(with: params, filename: "\(param).jpg", filePathKey: "file", imageDataKey: imageData, boundary: boundary) as Data

URLSession.shared.dataTask(with: request) { (data, response, error) in
    DispatchQueue.main.async {

        // error occured
        if error != nil {
            Helper().showAlert(title: "Server Error", message: error!.localizedDescription, in: self)
            return
        }


        do {

            // save mode of casting any data
            guard let data = data else {
                Helper().showAlert(title: "Data Error", message: error!.localizedDescription, in: self)
                return
            }

            // fetching JSON generated by the server - php file
            let json = try JSONSerialization.jsonObject(with: data, options: .allowFragments) as? NSDictionary

            // save method of accessing json constant
            guard let parsedJSON = json else {
                return
            }

            // uploaded successfully
            if parsedJSON["status"] as! String == "200" {

            } else {

                // show the error message in AlertView
                if parsedJSON["message"] != nil {
                    let message = parsedJSON["message"] as! String
                    Helper().showAlert(title: "Error", message: message, in: self)
                }

            }

        } catch {
            Helper().showAlert(title: "JSON Error", message: error.localizedDescription, in: self)
        }

    }
}.resume()

hhmessages.insert([pictureImg.image: imageData] as AnyObject, at: hhmessages.endIndex)

 let indexPath = IndexPath(row: hhmessages.count - 1, section: 0)

 tableView.beginUpdates()
 tableView.insertRows(at: [indexPath], with: .automatic)

 tableView.endUpdates()

 tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)

} 上传文本功能

func uploadPost() { // validating vars before sending to the server guard let user_id = user?["id"] as? String, let sender = user!["username"] as? String, let avaPath = user?["ava"] as? String else {

        // converting url string to the valid URL
        if let url = URL(string: user?["ava"] as! String) {

            // downloading all data from the URL
            guard let data = try? Data(contentsOf: url) else {
                return
            }

            // converting donwloaded data to the image
            guard let image = UIImage(data: data) else {
                return
            }

            // assigning image to the global var
            let currentUser_ava = image
            let ava = currentUser_ava
        }

        return
}

let messagetext = replyTxt.text!.trimmingCharacters(in: .whitespacesAndNewlines)
let avame = user!["ava"]
let postimage = pictureImg.image

let recipientfe = messages["recipient"]
let uuidfe = messages["uuid"] as! String

hhmessages.insert(["messagetext": messagetext] as AnyObject, at: hhmessages.endIndex)
print(user?["ava"])

let indexPath = IndexPath(row: hhmessages.count - 1, section: 0)

tableView.beginUpdates()
tableView.insertRows(at: [indexPath], with: .automatic)

tableView.endUpdates()

tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)

replyTxt.text = ""

let recipient = messages["username"] as! String

let rid = String(describing: messages["sender_id"]!)
let uuid = messages["uuid"] as! String

puuid = UUID().uuidString


// prepare request
let url = URL(string: "https://localhost/messagepost.php")!
let body = "sender_id=\(user_id)&sender=\(sender)&text=\(messagetext)&recipient_id=\(rid)&recipient=\(recipient)&uuid=\(uuidfe)&puuid=\(puuid)"

        var request = URLRequest(url: url)
    request.httpMethod = "POST"
    request.httpBody = body.data(using: .utf8)

    // send request
    URLSession.shared.dataTask(with: request) { (data, response, error) in
        DispatchQueue.main.async {

            // error happened
            if error != nil {
                Helper().showAlert(title: "Server Error", message: error!.localizedDescription, in: self)
                return
            }

            do {
                // converting received data from the server into json format
                let json = try JSONSerialization.jsonObject(with: data!, options: .allowFragments) as? NSDictionary

                // safe mode of casting json
                guard let parsedJSON = json else {
                    return
                }

                // if the status of JSON is 200 - success
                if parsedJSON["status"] as! String == "200" {

                    // comment is inserted
                    print(parsedJSON)

                } else {
                    Helper().showAlert(title: "400", message: parsedJSON["message"] as! String, in: self)
                    return
                }

            // json error
            } catch {
                Helper().showAlert(title: "JSON Error", message: error.localizedDescription, in: self)
                return
            }

        }
    }.resume()

}

表视图代码

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return hhmessages.count }

func numberOfSections(in tableView: UITableView) -> Int {
return 1
 }

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      let colorSmoothGray = UIColor(red: 229/255, green: 229/255, blue: 234/255, alpha: 1)
    let colorBrandBlue = UIColor(red: 148 / 255, green: 33 / 255, blue: 147 / 255, alpha: 1)
let pictureURL = hhmessages[indexPath.row]["uploadpath"] as? String

// no picture in the post
if pictureURL?.isEmpty == true {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! ConversationCell
    cell.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi));

    isLoading = true

    let hhpost = hhmessages[indexPath.row]
    let smimages = hhpost["path"] as? UIImage
    let text = hhmessages[indexPath.row]["messagetext"] as! String
    cell.messageLbl.text = text
    cell.smavaImg.image = smimages

        cell.messageLbl.textAlignment = .right
        cell.messageLbl.backgroundColor = colorSmoothGray
        cell.messageLbl.textColor = .black
        cell.messageLbl.font = UIFont.preferredFont(forTextStyle: UIFontTextStyle.body)
        cell.messageLbl.font?.withSize(25)
        cell.messageLbl.clipsToBounds = true
          // get main queue to this block of code to communicate back
   DispatchQueue.main.async {
    cell.messageLbl.sizeToFit()
    tableView.transform = CGAffineTransform(rotationAngle: -CGFloat.pi)
    cell.transform = CGAffineTransform(rotationAngle: CGFloat.pi)

}
    return cell
} else {
    let cell = tableView.dequeueReusableCell(withIdentifier: "PicCell", for: indexPath) as! PicConversationCell
    cell.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi));

    cell.smavaImg.image = smimages
    //if let message = messageData {
    for i in 0 ..< self.incoming.count {
        // Confiture the constraints for cell
        if self.incoming[indexPath.row] == 1 {
                             // Constraints
           cell.lefBubbleConstraint.isActive = true
            cell.rightBubbleConstraint.isActive = false
            if cell.postpictureImg.image == nil {
                cell.postpictureImg.backgroundColor = colorwhite
                cell.postpictureImg.clipsToBounds = true

            }
            else {
                cell.postpictureImg.backgroundColor = .clear
                cell.postpictureImg.clipsToBounds = true

            }

        }
        else if self.incoming[indexPath.row] == 0 {


            // Constraints
            cell.lefBubbleConstraint.isActive = false
            cell.rightBubbleConstraint.isActive = true
            if cell.postpictureImg.image == nil {
                cell.postpictureImg.backgroundColor = colorwhite
                cell.postpictureImg.clipsToBounds = true

            }
            else {
                cell.postpictureImg.backgroundColor = .clear
                cell.postpictureImg.clipsToBounds = true

            }

        }

    // pictures logic
    let pictureString = hhmessages[indexPath.row]["uploadpath"] as? String
    let pictureURL = URL(string: pictureString!)!

    // if there are still pictures to be loaded
    if hhmessages.count != pictures.count {

        URLSession(configuration: .default).dataTask(with: pictureURL) { (data, response, error) in
                              // downloaded
            if let image = UIImage(data: data!) {

                self.pictures.append(image)

                DispatchQueue.main.async {
                    cell.postpictureImg.image = image
                }
            }

            }.resume()

        // cached picture
    } else {

        DispatchQueue.main.async {
            cell.postpictureImg.image = self.pictures[indexPath.row]
        }
    }

    }

    return cell

}

}

展开
收起
游客5akardh5cojhg 2019-12-14 18:16:35 540 0
0 条回答
写回答
取消 提交回答
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
阿里文娱大前端技术实践 立即下载
前端代码是怎样智能生成的 立即下载