本文共 3299 字，大约阅读时间需要 10 分钟。

我自己的这个时联合了elementui做的图片上传

这个不能让他自动上传，我们需要使用http-request重新写上传，action这个不能缺少，但是我写这个的时候有个疑问，用这个放上去文件之后，before-upload 这个钩子就使用不到了，是因为只是放上去了，但是没有上传吗？如果有人知道的话，麻烦留言一下

我们这边做的是，在图片上传前 从我们后端那边拿到签名保存起来，然后在按照我下面的写法给放上去

upLoad(item) {       const file = item.raw   // 图片文件    const fileName = item.raw.name // 图片文件名称    const key = `${     this.directory}/${     item.pic_name}` // 这个其实就是你最后要上传到阿里云的目录下的路劲  item.pic_name 这个是我们后端返回给我的重命名的图片名称    const policy = item.policy // 后端签名返回    const OSSAccessKeyId = this.OSSAccessKeyId // 后端签名返回    // const callback = 'callback' // 这个放开的话， 就是有回调，我这里没有用    const signature = item.signature  // 后端签名返回    const url = `https://${     this.region}` // 这个是上传的路径    // console.log(file)    let params = new FormData()    // params.append('name', `${fileName}`)    params.append('key', `${     key}`)    // params.append('key', `shop-pic/111_shop_pic_background.jpg`)    params.append('policy', `${     policy}`)    params.append('OSSAccessKeyId', `${     OSSAccessKeyId}`)    params.append('success_action_status', 200)    // params.append('callback', `${callback}`)    params.append('Signature', `${     signature}`)    params.append('file', file, fileName) // 切记，这个东西要放在最后    axios.post(url, params).then(res => {           if (res.status === 200) {               this.imgUploadSuccess = true        }    })},

在最后其实可能你写完这些之后，然后还是会报错，我这个是有一个就是自己本地上传不了，我也不知道为什么， 这个时候我们需要把代码打包放到服务器上面去，这样就可以了。如果有人知道为什么在本地不能上传图片，而打包之后可以的话，麻烦留言告知一下。谢谢

更新 uni-app 微信小程序端实现纯前端图片选择 以及上传到oss

最近接到一个小程序评论的功能，这个需要支持图片上传，废话不多说，下面开始看代码

addimage() {      let that = this   let len = 9 - that.list.length   console.log('len', len)   uni.chooseImage({          count: len,       sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有       sourceType: ['album'], //从相册选择       success: function (res) {              that.list = that.list.concat(res.tempFilePaths)       }   });},

上面直接使用uni-app自己的api uni.chooseImage 选择图片，下面的参数自己去看

我这边是后端给我签名之后上传的

前面有图片内容上传的接口 ，调用之后后端会返回给我签名的数据

upLoad(item) {       const key = `${     this.directory}/${     item.pic_name}`    const policy = item.policy    const OSSAccessKeyId = this.AccessKeyId    const signature = item.signature    const url = `https://${     this.region}`    let that = this    uni.uploadFile({           url : url,        filePath: that.list[that.currindex],        name: 'file',        formData: {               'key': key,            'policy': policy,            'OSSAccessKeyId': OSSAccessKeyId,            'signature': signature,            'success_action_status': '200',        },        success: function (res) {               console.log('上传成功之后回调', res);            if (res.statusCode === 200) {                   that.currindex++                if (that.currindex < that.list.length) {                       that.upLoad(that.resdata[that.currindex])                } else {                       that.submitdata()                }            } else {                   uni.showToast({   title: '图片上传出现错误', icon: 'none'})            }        }    })},

这里特地说一下这个参数 filePath 这个参数里面的数据就是上文中图片选择成功之后，返回可以展示的数据