vant-weapp上传文件

最新推荐文章于 2024-03-26 19:00:00 发布

Qiu_SS

最新推荐文章于 2024-03-26 19:00:00 发布

阅读量459

点赞数 1

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

本文链接：https://blog.csdn.net/Qiu_SS/article/details/129201890

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、wxml

 <van-uploader file-list="{{ declaration.fileList }}" accept="all" preview-size="60" bind:delete="deleteFile" bind:after-read="afterReadUpload">
</van-uploader>

二、js

1、由于我接收到后台的数据是由字符串拼接的，所以在查看已存在的文件时，我需要将字符串转化为数组。

//后台拿到的数据
var declaration = res.data.declaration
//declaration:{attachmentUrl:'field/field.png;field/field.jpg'}
      var attachmentUrl = declaration.attachmentUrl
//文件域名，如果保存时为完整url则不需要此操作
      var imgUrl = t.data.imgUrl
      var fileList = []
      var temp = []
      if (attachmentUrl && attachmentUrl.length > 0) {
        temp = attachmentUrl.split(',')
        temp.forEach(i => {
          fileList.push({
            url: imgUrl + i,
            oriUrl:i,
          })
        })
        declaration.fileList = fileList
      }
      t.setData({
        declaration: declaration
      })

2、上传文件后处理

afterReadUpload(e) {
    var t = this
    var data = e.currentTarget.dataset
    var declaration = t.data.declaration
    const {
      file
    } = e.detail;
    console.log(file)
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
      url: config.enterpriseDomain + '/client/attachFile/upload/', // 仅为示例，非真实的接口地址
      filePath: file.url,

      formData: {
        fileType: 'FileType',//后台定义
        file: file.url,
        method: 'POST'
      },
      name: 'file',
      header: {
        'Content-Type': 'multipart/form-data',
        'X-Token': token,//此处可能为登录时的token
        'Cookie': 'session.id=' + sessionId//此处可能为登录时的sessionId
      },
      success(res) {
        // console.log("success" + res)
        // 上传完成需要更新 fileList
        let result = JSON.parse(res.data)

        if (result.meta.code == 200) {
        //处理为需要的格式
          let attachFile = result.data.attachFile
          if (!declaration.fileList) {
            declaration.fileList = []
          }
          declaration.fileList.push({
            url: attachFile.fullFilePath,
            oriUrl: attachFile.filePath,
            fileType: attachFile.fileType,
            name: file.name,
            id: attachFile.id
          })
          declaration.attachmentUrl = declaration.attachmentUrl ? declaration.attachmentUrl + ',' + attachFile.filePath : attachFile.filePath
          t.setData({
            declaration: declaration
          })
        }
      },
      fail(err) {
        console.log(err)
      }
    });
  },

3、删除

  deleteFile(e) {
    var t = this
    const {
      index,
      file
    } = e.detail
    var data = e.currentTarget.dataset
    var declaration = t.data.declaration
    declaration.fileList.splice(index, 1)
    var fileList = declaration.fileList
    var temp = []
    if (fileList.length > 0) {
      fileList.forEach(res => {
        temp.push(res.oriUrl)
      })
      declaration.attachmentUrl = temp.join(',')
    } else {
      declaration.attachmentUrl = ''
    }
    t.setData({
      declaration: declaration
    })

  },