vue使用vant的uploader上传图片到服务器

1、封装上传文件的公共方法

//上传文件
uploadFiles(targetFormData, callback) {
	let root = window.location.hostname === 'xxx.xxx.com'
		// 正式环境api接口
		?
		`xxx1.xxx1.com/`
		// 测试环境api接口
		:
		`xxx1.xxx1.net/`;
	// 发送请求
	var xhr = new XMLHttpRequest();
	var timeTmp = 0;
	var intervalObj = setInterval(function () {
		timeTmp++;
		if (timeTmp > 40) {
			clearInterval(intervalObj);
			console.log('传送已超时');
		}
	}, 1000);
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4 && xhr.status === 200) {
			clearInterval(intervalObj);
			// 上传成功，获取到结果 results
			var res = JSON.parse(xhr.responseText);
			if (res.success) {
				callback(res.data);
			} else {
				console.log(res.msg);
			}
		}
	};
	//侦查当前附件上传情况
	xhr.open("POST", root + 'attachment/upload');
	xhr.send(targetFormData);
},
//判断是否是数组;
isArrayFn(value) {
	if (typeof Array.isArray === "function") {
		return Array.isArray(value);
	} else {
		return Object.prototype.toString.call(value) === "[object Array]";
	}
},

2、页面使用
场景一：一次只能上传一张，有多个上传域

<template>
	  <van-uploader
	     v-model="xx"
	     :max-count="1"
	     upload-text="上传图片"
	     :after-read="afterRead"
	     :delete="beforeDelete"
	     :name="0"
	   />
 </template>
 <script>
      afterRead(file,e){
	        //console.log(file)
	        console.log(e)
	        var _this = this;
	        // 此时可以自行将文件上传至服务器
	        var targetFormData = new FormData();
	        var index = e.name;
	        var files = 'file'+index;
	        if (!_.isArrayFn(file)) {
	            file = [file];
	        }
	        //如果图片太大还在上传中用户点了上传请求会获取不到图片，加个loading确定上传成功后才能操作上传请求
	        Toast.loading({
	            message: '上传中...',
	            forbidClick: true,
	            loadingType: 'spinner'
	        });
            const element = file[0];
            targetFormData.append("filedata", file[0].file);
            targetFormData.append("token", _.getToken());//获取token封装的一个方法
            // 上传文件
            _.uploadFiles(targetFormData, function(res) {
                //console.log(res);
                Toast.clear();
                _this.$set(_this.file,files,res.fileUrl);
                console.log(_this.file)
            });
	    },
	    beforeDelete(file,e){
	        console.log('file',file)
	        console.log('e',e)
	        var _this = this;
	        var index = e.name;
	        var files = 'file'+index;
	        _this.$set(_this.file,files,'')
	        console.log(_this.file)
	    }
 </script>

场景二：一次可以上传多张图片，有一个上传域

<template>
	  <van-uploader
        v-model="xx"
         multiple
         :max-count="3"
         :after-read="afterRead"
         slot="label"
       />
 </template>
 <script>
      afterRead(file){
	      var _this = this;
	      // 此时可以自行将文件上传至服务器
	      var targetFormData = new FormData();
	      if (!_.isArrayFn(file)) {
	        file = [file];
	      }
	      for (let i = 0; i < file.length; i++) {
	        const element = file[i];
	        targetFormData.append("filedata", file[i].file);
	        targetFormData.append("token", _.getToken());
	        // 上传文件
	        _.uploadFiles(targetFormData, function(res) {
	          console.log(res);
	          _this.refund_images.push(res.id);
	        });
	      }
	  },
 </script>

这里的图片会是一个数组形式，提交的时候和其他表单数据一起提交即可，都有对应的key、value值，不需要再做处理