[JavaScript知识库]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