vue项目之上传单个文件或者多个文件
一、区别不管是单个文件或者多个文件上传,都是通过后台控制的,接口不一样。目前,单个文件,后台不需要传其他额外的参数,就需要上传文件的信息二、仅上传文件信息,没有额外的参数upfile () {let that = thislet formData = new FormData()// .control-file上传文件类名, obj.upId当前点击的上传文件, v...
·
一、区别
不管是单个文件或者多个文件上传,都是通过后台控制的,接口不一样。
目前,单个文件,后台不需要传其他额外的参数,就需要上传文件的信息
二、仅上传文件信息,没有额外的参数
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:接口数据返回如果是链接,页面只显示文件名,需要截取出来文件名。
更多推荐
已为社区贡献16条内容
所有评论(0)