依靠u-upload实现多图携带参数上传。多图上传。

原创

于 2021-10-15 14:29:31 发布 · 4.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5 #uni-app

博客内容讲述了在uniapp中使用u-upload组件进行多图上传时遇到的问题，即无法在真机上携带参数上传。作者提出了一个解决方案，即通过后端修改接口，先上传图片获取图片地址，然后将图片地址与其他参数一起发送到数据保存接口。文章详细展示了u-upload组件的配置及上传、删除图片的回调函数，以及表单提交逻辑。

！注意 ：因为u-uplod以及uniapp本身的上传文件API uni.uploadFile 都没有办法在真机上做到携带参数多图上传。解决办法是让后端将上传方式改为两个接口，一个接口上传图片返回图片地址。图片地址和参数一起上传到数据保存的接口。

u-upload引用

<u-upload
    ref="uUpload"
    :header="header" //设置header
    :action="actions"// 后端接受图片的地址
    name="file"	// 根据后端要求命名上传内容名字
    max-size="1048576" 	// 图片大小限制
    :limitType="['png', 'jpg', 'jpeg']" // 图片格式限制
    max-count="10" // 图片数量限制
   @on-success="imgUpSuccess"	// 上传成功回调
   @on-remove="imgRemove"	// 删除图片回调
</u-upload>