前端图片上传逻辑整理

 

上传前校验

use-before-read属性设置为true,然后绑定 before-read 事件可以在上传前进行校验,调用 callback 方法传入 true 表示校验通过,传入 false 表示校验失败。

1、上传前校验,最大10M,image格式   beforeRead(event) {     const { file, callback } = event.detail;     let sizeFlag = file.every((item) => item.size < 1024 * 1024 * 10);     if (!sizeFlag) {       app.$toast("请选择10M以下的图片");       callback(false);     } else {       callback(true);     }   },

上传完毕后获取到对应的临时地址

2、文件上传完毕后会触发after-read回调函数,获取到对应的文件的临时地址,   afterRead(event) {     const { file } = event.detail;     file.map((item) => (item.status = "done"));   },

获取到临时地址之后,调用后端接口获取到上传到服务器的一些参数

wx.uploadFile()

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data

url:开发者服务器地址(后端接口中获取)

filePath:要上传文件资源的路径 (本地路径)(就是获取到的临时地址)

name: 'file',//必须填file formData:HTTP 请求中其他额外的 form data  let uploadSuccessUrl =this.fileUploadParams.dir + "/" + App.uuid();  //保证唯一性      formData: {             'key': uploadSuccessUrl,               'policy': this.fileUploadParams.policy,      (后端返回)                  'OSSAccessKeyId': this.fileUploadParams.accessid, (后端返回)               'signature': this.fileUploadParams.signature,    (后端返回)           }, success成功之后: const url = _this.fileUploadParams.host + "/" + uploadSuccessUrl; ossList.push(url)
上一篇:Spark学习笔记[1]-scala环境安装与基本语法


下一篇:Day22 并发编程(上)