mpvue小程序使用vant结合原生小程序组件实现图片上传

最新推荐文章于 2023-12-14 21:54:20 发布

missGril

最新推荐文章于 2023-12-14 21:54:20 发布

阅读量468

点赞数

分类专栏： mpvue 文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/sinat_41694829/article/details/125641022

版权

mpvue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vant有个上传图片的组件，但还是要结合小程序的上传方法才行，具体看以下代码
html代码：

 <van-uploader :file-list="fileList"  :max-count="1" @afterread="afterRead" preview-size="75px" @delete="deleteImg"/>

js代码：

//上传图片
      afterRead(file){
        console.log(file)
        this.fileList.push({
          url:file.mp.detail.file.url,
          isImage: true,
        });
        var that = this;
        //上传到服务器
        wx.uploadFile({
          url: 自己的服务器域名,
          filePath: file.mp.detail.file.url,
          name: 'uploadfile_ant',
          formData: {
          },
          header: {
            "Content-Type": "multipart/form-data",
            "N-Harborgo-Token":wx.getStorageSync('userToken'),
          },
          success: function (res) {
            wx.hideToast();
            var data = JSON.parse(res.data);
            //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
            console.log(data);
            that.recordList.activityImage = data.doc.url
          },
          fail: function (res) {
            console.log(res)
            wx.hideToast();
            wx.showModal({
              title: '错误提示',
              content: '上传图片失败',
              showCancel: false,
              success: function (res) { }
            })
          }
        });
      },
      deleteImg(){
        this.fileList=[];
        this.recordList.activityImage = ''
      },