vue项目之上传单个文件或者多个文件

一、区别

不管是单个文件或者多个文件上传，都是通过后台控制的，接口不一样。
目前，单个文件，后台不需要传其他额外的参数，就需要上传文件的信息

二、仅上传文件信息，没有额外的参数

	upfile () {
		let that = this
		let formData = new FormData()
		// .control-file上传文件类名， obj.upId当前点击的上传文件， val（）是上传文件的信息
		let name = $('.control-file').eq(obj.upId).val()
		let fileObj = document.getElementsByClassName('control-file')[obj.upId].files[0]
		
		if (fileObj.name != '') {
			formData.append('file', fileObj)
			formData.append('name', name)
			$.ajax({
				url: 'http://10.10.3.182:8080/uploadFile',
				trpe: 'POST',
				data: formData,
				// 告诉jQuery不要去处理发送的数据
				processData: false,
				// 告诉jQuery不要去设置Content-Type请求头
				dataType: 'json',
				beforeSend: function(responseStr){
					console.log('正在进行，请稍后')
				},
				success: function (responseStr) {
					if (responseStr){
						// 数据为空，提示
						if (responseStr.data == null) {
							that.$alert(responseStr.message, '提示',{
								confirmButtonText: '确定'
							})
							return false
						}
						// 有数据
						that.$alert('上传成功！！！', '提示',{
							confirmButtonText: '确定'
						})
						that.controlValue = responseStr.data
					}
				}
			})
		}
	}

三、多个参数

刚开始用的 ajax–data里面多加了几个参数，发现没有用，就直接在ajax–url后面加了

	let processTemplateId = 001
	let processTemplateId  = 234
	let processName = '我是汉字'
	$.ajax({
				url: 'http://10.10.3.182:8080/uploadFile?processId' + processId + '&processTemplateId=' + processTemplateId + '&processName=' + processName,
				trpe: 'POST',
				data: formData,
				// 告诉jQuery不要去处理发送的数据
				processData: false,
				// 告诉jQuery不要去设置Content-Type请求头
				dataType: 'json',

这样，数据可以取出来

四、

单文件上传，接口返回数据返回最新一条
多文件上传，接口返回多个数据

	// $.ajax() 在main.js中引入jQuery
	import $ from 'jquery'
	// $alert -- elementui,项目中是全局引入，也可局部引入
	import ElementUI form 'element-ui'
	import 'element-ui/lib/theme-chalk/index.css'
	Vue.use(ElementUI)

PS：接口数据返回如果是链接，页面只显示文件名，需要截取出来文件名。