vue + vant + axios上传图片

 <div class="">
          <div class="">图片预览 禁止上传</div>
          <van-uploader preview-size="60px" v-model="fileList" readonly :show-upload="false" :deletable="false" multiple></van-uploader>
        </div>
        <div class="">
          <div class="">图片上传</div>
          <van-uploader preview-size="60px" v-model="fileList2" :after-read="getImgCallback" multiple max-count="5"></van-uploader>
        </div>

 new Vue({
        el: "#app",
        data() {
          return {
            fileList: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }, { url: "https://img01.yzcdn.cn/vant/tree.jpg" }],
            fileList2: [],
          };
        },

        methods: {
        // 上传图片-单个上传回调
        vantUpload(dataV) {
		  return axios({
		    method: "post",
		    headers: { "Content-Type": "multipart/form-data" },//重点--请求头
		    url: serviceUrl + "tftp/inserttftp",
		    data: dataV,
		  });
		},
        getImgCallback(fileData) {
            fileData.status = "uploading"; //上传加载状态-加载中
            var dataV = new FormData();//重点--使用formdata添加需要一起传的参数
            dataV.append("figuid", "3f3945ec-a60c-4769-9019-4f3b6dd001e8");
            dataV.append("fType", "pzftptype");
            dataV.append("fCtype", 1);
            dataV.append("file", fileData.file);

            this.vantUpload(dataV).then((res) => {
              console.log(res);
              if (res.data.result === 1) {
                this.$toast.success(res.data.resultmsg);
                fileData.status = "done"; //上传加载状态-完成
                fileData.message = "上传成功";
              } else {
                console.log(res);
                fileData.status = "failed"; //上传加载状态-失败
                fileData.message = "上传失败";
              }
            });
          },
        },
      });

请添加图片描述
vant官网:https://vant-contrib.gitee.io/vant/#/zh-CN/uploader
axios官网:http://www.axios-js.com/zh-cn/docs/#%E8%AF%B7%E6%B1%82%E9%85%8D%E7%BD%AE

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值