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

清疚 2021-09-17 09:18 727阅读 0赞

# 一、区别 #

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

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

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：接口数据返回如果是链接，页面只显示文件名，需要截取出来文件名。