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

最新推荐文章于 2025-05-28 21:05:28 发布

原创最新推荐文章于 2025-05-28 21:05:28 发布 · 4.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

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

uni-app 专栏收录该内容

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

！注意 ：因为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>

变量

data(){
	return{
		actions: tui.interfaceUrl() + "/serviceTyre/imgFile",
    	header: {
	        		Authorization: uni.getStorageSync("accessToken"),
	      		},
		}
}

逻辑代码

 // 上传成功回调
    imgUpSuccess(data) {
      this.form.files.push(data.data); // 将上传成功返回的地址添加到上传的数据中
      console.log(this.form.files);
    },
    // 删除图片回调
    imgRemove(index) {
      this.form.files.splice(index, 1);
      console.log(this.form.files);
    },
     // 确定按钮
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.postCreateApply();
        } else {
          console.log("验证失败");
        }
      });
    },
    async postCreateApply() {
      console.log(this.form);// this.form为上传的数据
      await createApply(this.form).then((e) => {
        console.log(e);
        if (e.code == 0) {
          this.$refs.uToast.show({
            title: "提交成功",
            type: "success",
          });
          this.empty();// 清空数据
        }
      });
    },