微信使用formdata形式上传图片

 

在原生的js中，图片上传直接new一个formdata对象

  //获取input上传文件的源文件流
var uploadFile = document.getElementById("my_photo").files[0];
//声明formData对象
    var formData = new FormData();
//添加后台所需参数
    formData.append("urlType", 1)
    formData.append("multipartFile", uploadFile)
    $.ajax({
        type: 'post',
        url: 后台接口,
        data: formData,
        contentType: false, //不设置内容类型
        processData: false, //不处理数据
        success: function (data) {
            if ("SUCCESS" == data.result) {
                //图片选择上传后显示
                 const reader = new FileReader();
                 reader.readAsDataURL(uploadFile);
                 reader.onloadend = (e) => {
                    $(".imgurl").append(`
                               <img class="img-item" src="${data.datalist}" alt="img">
                               <div class="comment-container-item-photo__delete" onclick="$(this).parent().empty()">×</div>
                               `);
                 }
            }
        }

 

而微信不支持 formdata对象上传，因此我们考虑微信API进行上传，

wx.chooseImage({})进行图片的选择并进行展示，wx.uploadFile({})进行图片的上传

//div点击选择图片时弹开相册
            bindUploadImg(){
                var _this = this; //会有变量污染，因此最好声明一个_this进行赋值
                wx.chooseImage({//微信选择图片
                    count: 9, // 默认9上传图片数量
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

                        console.log('返回选定照片的本地文件路径列表', res)
//成功后赋值给图片路径的全局变量，进行页面的图片渲染，以便有更好的交互
                       var tempFilePaths = res.tempFilePaths
                        _this.goodsimgUrl = tempFilePaths
                            wx.uploadFile({//调用微信里面上传文件的开放接口
                                url: 'url',//上传到服务器的接口,https开头
                                filePath: tempFilePaths[i],//文件的路径，只能有一个，不支持数组等一次性包含多个文件路径的形式
                                header: {"Content-Type": "multipart/form-data"},
                                name: 'multipartFile',//接口文档中给该文件的字段名
                                formData: {urlType: 1,},//这里面写除了文件外的其他参数
                                success: (result) => {
                                          console.log(result)
                                },
                            })
                    }
                })
            },

 

至此就可以用formdata进行上传图片文件了，最多可以一次性选择9张图片，不要太爽哦

最后再看一下html

               <!-- 上传图片 -->
                <div class="comment-container-item-photo-box">
                    <!--  //图片渲染模块 -->
                    <div class="imgurl" v-for="item in goodsimgUrl" :key="item">
                        <img :src="item" class="imgurl-item"/>
                    </div>
                    <!-- //点击上传图片模块 -->
                    <div class="comment-container-item-photo" @click="bindUploadImg()</div>  
                </div>







  data() {
            return {
                goodsimgUrl: [],//选中图片的路径 
            }
        },