一、区别

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

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

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

Logo

前往低代码交流专区

更多推荐