uview-plus上传图片，upload组件带参数上传_u-viewplus支持上传文件嘛

一、引入uview-plus

请自行在项目中引入uview-plus组件库，此处不多赘述

二、使用

html 部分，上传组件的样式自己去定义，不多赘述

<u-upload
  :fileList="fileList"     // 文列列表
  @afterRead="afterRead"   // 读取后的处理函数
  @delete="deletePic"      // 删除图片
  name="upload-img"        // 标识符，可以在回调函数的第二项参数中获取
  :maxCount="1"            // 最大选择图片的数量
  width="250"
  height="150"        
  accept="image"           // 上传的文件的类型:all | media | image | file | video
>
  <image                  // 这一款属于自定义上传按钮样式
    src="/static/img/baseInfo-icon.png"
    mode="widthFix"
    style="width: 15px"
  ></image>
</u-upload>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上传方法：

// 新增图片
const afterRead = (event) => {
  uni.uploadFile({
    header: {
      XXXXX: 'token', // XXXXX：后端约定的认证方式名称；token：登录成功之后获取到的token
      'Content-Type': 'multipart/form-data' // 请求体的编码格式
    },
    url: 'http://XXX.XXX.XXX.XXX:XXX/api/resource/uploadResource', // 后端接口文档上的接口地址
    filePath: event.file.url, // 图片的路径
    name: 'file',
    formData: {
      flag: '1' // 后端上传接口参数,这个地方你后端的接口文档
    },
    // 上传成功回调
    success: function (res) {
      const data = JSON.parse(res.data)
      console.log(data)
      // 上传成功之后拿到 res ，然后进行你的下一步操作
    },
    // 上传失败回调
    fail: function (err) {
      console.log(err)
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

三、上传多张图片

uview-plus官方文档：https://uiadmin.net/uview-plus/components/upload.html

在afterRead 拿到 event ，然后根据event.file.length，for循环调用多次 uni.uploadFile方法即可。详情见官方文档：