<input
type="file"
class="upload_input"
ref="upFile"
@change="fileChange(e, scope.row)"
accept="image/png, image/jpeg, image/gif, image/jpg"
/>
.......................................
fileChange (e, val) { // 上传
//获取文件
let evt = e || event
let that = this
let file = evt.target.files[0]
console.log(evt, val)
let strList = file.name.split('.')
let fileType = strList[strList.length - 1]
//获取七牛的token和key
this.$http.cloudGetToken(51, fileType).then(res => {
if (res.status == 1) {
this.uploadFile(file, res.result, val)
}
})
},
uploadFile (file, { uptoken, fileKey }, val) {
const fd = new FormData()
fd.append('token', uptoken)
fd.append('key', fileKey)
fd.append('file', file)
var xhr = new XMLHttpRequest()
var that = this
//向七牛发送请求
xhr.open('POST', '七牛的地址', true)
return new Promise(resolve => {
xhr.onload = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
//获取七牛返回的文件信息
var data = JSON.parse(xhr.responseText)
console.log(data, 'data')
if (data.result.w > 128 || data.result.height > 128) {
that.$Message.error('图片大小超过128*128!')
return
}
//向后台发送请求
let params = {
normId: val.id, fType: that.typeList[that.typeIndex].type, schoolCode: that.user.schoolCode, imgUrl: data.result.url
}
console.log(params)
that.$cloudRequest('/sxxxxx/xxxxxxx/xxxxxx', params, 'get').then(res => {
if (res.status == 1) {
console.log(data)
val.icon = data.result.url
console.log(val, 'val')
}
})
} else {
console.log(xhr.statusText)
}
}
}
xhr.onerror = function (e) {
console.log(xhr.statusText)
}
xhr.send(fd)
})
}
```
原生Input上传文件到七牛
最新推荐文章于 2025-04-17 10:04:57 发布