微信小程序 Vant 上传文件

上传附件

1. 使用van-uploader组件

	<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" max-count="{{1}}"
 	      deletable="{{ true }}" bind:delete="deleteAll" accept="all">
        <van-button custom-class="fup" round icon="plus" type="primary" size="small">上传附件</van-button>
   </van-uploader>

• file-list 可以绑定已经上传的图片列表，并展示图片列表的预览图
• bind:after-read 文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址
• max-count 属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
• deletable 是否展示删除按钮
• bind:delete 删除图片
• accept 接受的文件类型, 可选值为all(所有类型) media(媒体音频) image(图片) file(文件) video(视频)

2. afterRead 回调函数

afterRead (event) {
    const {
      file
    } = event.detail;	//获取图片信息
    const that = this;
    console.log(file);
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
      url: `${devConfig.url}/MaterialUploadFile`, // 调用后端上传文件接口
      filePath: file.url, //图片地址
      name: "uploadfile",// 这个须得与后端一致
      success (res) {
        // 上传完成需要更新 fileList
        console.log(res);
        const datamarks = res.data.match(/(\/\U.*?\")/g)[0];
        const data2 = datamarks.match(/[^\"]*/g)[0]; // 见下面
        console.log(data2);
        that.data.materialObjet.fileList.splice(0, 0, {
          ...file,
          url: devConfig.imgUrl+data2
        }); // 将后端返回的地址添加到fileList中，用于显示出改文件
        that.setData({
          fileList: that.data.materialObjet.fileList
        });
      }
    });
  },

上面的正则是由于我后端返回的地址有问题，所以使用了正则匹配

3. 后端代码

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
        public string MaterialUploadFile()
        {
            ReceiveResultData resultData = new ReceiveResultData();
            try
            {
                HttpPostedFile file = HttpContext.Current.Request.Files["uploadfile"];// 上面的name须得与"uploadfile"一致
                string date = "物料台账_" + DateTime.Now.ToString("yyyy-MM");
                string filePath = ConfigHelper.UploadFilePath + "物料台账\\" + date + "\\";
                string path = ConfigHelper.DownLoadFilePath + filePath;
                path = path.Replace("\\\\", "\\");
                //虚拟路径处理
                if (ConfigHelper.DownLoadFilePath.IndexOf("\\") == 0)
                {
                    path = "\\" + path;
                }
                //判断文件是否存在,不存在则创建
                if (Directory.Exists(filePath) == false)//如果不存在就创建file文件夹
                {
                    Directory.CreateDirectory(filePath);
                }
                ResultMessage rm = UploadifyHelper.UploadifyWX(file, filePath, true);
                //resultData.ResultState = rm.Success == "ok" ? 1:0;
                resultData.ResultMsg = rm.Data;
                return JsonHelper.Serializer(resultData.ResultMsg);
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }