新到手一个文件上传功能，具体实现是，当截图之后，在文本框中或者type=file的文本框中，粘贴的时候（ctrl+v）实现图片的上传
具体步骤是上传的时候需要验证传参token，那么实现的具体步骤就是，先登录获取token，然后再在请求头传入token两个大步骤实现
我这里是使用vue-cli3实现，很久没用过，配置用了很多时间，大概这个功能，从告知我，到完成上传用了一天的时间，70%的时间花费在了vue请求的axios配置上，我先说axios接口配置
vue.config.js
devServer: {
// eslint警告和报错
overlay: {
warnings: true,
errors: true
},
port: 8080,
proxy: {
'/api': {
target: 'http://xxx.xxx.xxx',
changeOrigin: true, // 是否支持跨域
ws: true,
// https配置
secure: true,
pathRewrite: {
'^/api': '/'
}
}
}
},
vue.config.js配置里面接口的代理主要是devServer里面，这里的proxy中的target是域名，只写域名，然后/api代理这个域名，pathRewrite这里的就是用'/'来代替'/api'的部分
然后就是在自定义一个http.js 来封装axios的请求
/* eslint-disable */
import axios from 'axios'
import qs from 'qs'
import store from '../store'
import router from '../router'
const baseUrl = '/api'
axios.defaults.baseURL = baseUrl
axios.defaults.timeout = 20000
axios.defaults.withCredentials = false //是否携带cookie
axios.defaults.headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}
axios.interceptors.request.use(
config => {
// 若是有做鉴权token , 就给头部带上token
// var user = localStorage.getItem('token')
// if (user !== null) {
// console.log(1)
// if (user !== '') {
// console.log(2)
// config.headers.Authorization = user
// }
// }
// config.headers.common['Authorization'] = user
store.dispatch('showLoading', '加载中')
return config
},
error => {
store.dispatch('hideLoading')
return Promise.reject(error)
}
)
axios.interceptors.response.use(
response => {
let getVisitor = localStorage.getItem('getVisitor')
if (getVisitor === '游客') {
if (response.data.code === 400) {
return Promise.reject({
message: response.data.msg
})
}
} else if (getVisitor === null) {
if (response.data.code === 400) {
router.push({
name: 'auth'
})
return Promise.reject({
message: response.data.msg
})
}
}
return response
},
error => {
console.log(error.response)
if (!error.response) {
return Promise.reject ({
message: '请求无响应'
})
}
let message
switch (error.response.status) {
case 400:
message = '错误请求'
break
case 401:
message = '未授权'
break
case 403:
message = '拒绝访问'
break
case 404:
message = '请求路径未找到'
break
case 500:
message = '服务器异常'
break
default:
message = '未知错误'
}
return Promise.reject(error)
}
)
const http = {
get (url, payload = undefined) {
return axios({
method: 'get',
url: url,
params: payload,
paramsSerializer: params => {
return qs.stringify(params, { indices: false })
}
})
},
post (url, payload = undefined) {
return axios({
method: 'post',
url: url,
data: payload,
transformRequest: [
data => {
return qs.stringify(data, { indices: false })
}
]
})
},
put (url, payload = undefined) {
return axios({
method: 'post',
url: url,
data: payload
})
},
delete (url, payload = undefined) {
return axios({
method: 'delete',
url: url,
data: payload
})
},
postJson (url, payload = undefined) {
var user = localStorage.getItem('token')
return axios({
method: 'post',
url: url,
data: payload,
headers: {
// 'Content-Type': 'application/json;charset=UTF-8',
'Authorization': user
}
})
},
postFile (url, payload = undefined) {
var user = localStorage.getItem('token')
return axios({
method: 'post',
url: url,
data: payload,
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': user
}
})
},
all (promises) {
return Promise.all(promises)
},
getBase () {
return baseUrl
}
}
export default http
这样的封装网上随处可见。
上面代码最上面：
const baseUrl = '/api'
axios.defaults.baseURL = baseUrl
这两句是/api代替域名来请求，
本篇请求是上传文件，所以使用的是上面代码中的postFile方法请求接口，因为post方法请求接口，自定义的时候使用了qs对数据进行了序列化，所以上传的时候不能使用post的接口请求
postFile (url, payload = undefined) {
//获取token
var user = localStorage.getItem('token')
return axios({
method: 'post',
url: url,
data: payload,
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': user
}
})
}
这里的Authorization 是和后台约定好的传入的token的入参，然后上传的时候请起头是'Content-Type': 'multipart/form-data',这里这样设置是没有问题的
那么现在就去页面接口请求
复制到剪切板--粘贴（ctrl+v）代码：
var that = this
var body = document.getElementsByTagName('body')[0]
body.addEventListener('paste', function (e) {
var clipboard = e.clipboardData
var type = clipboard.items[0].type
if (type.match(/image/)) {
var blob = clipboard.items[0].getAsFile()
//图片文件赋值到url变量
that.url = blob
var file = new FileReader()
// file.addEventListener('loadend', function (e) {
// // that.url = e.target.result
// // document.getElementById('result').value = e.target.result
// // document.getElementById('img').src = e.target.result
// })
file.readAsDataURL(blob)
} else {
console.log('失败')
}
})
然后先登录获取token：
login () {
localStorage.removeItem('token')
this.$http.post('/manager/login/login', {
username: '18888888888',
passwd: '123456',
captchaid: '12',
code: '111'
}).then((res) => {
this.token = res.data.data.token
localStorage.setItem('token', this.token)
this.upload()
})
},
最后进行图片文件上传
// 上传
upload () {
//创建一个formData对象
let param = new FormData()
//把图片文件添加到formData中，还有其他的参数一并添加
param.append('voucher_image', this.url)
param.append('type', 'recharge')
param.append('trade_no', 'dda1231231')
//param.get('voucher_image')只有这样才能看到文件添加到里面了，直接打印param是没有东西的
console.log(param.get('voucher_image'))
this.$http.postFile('/manager/upload/upload_voucher_image', param).then((res) => {
console.log(res)
})
},
最后一步就是接口请求上传，然后差不多就成功了
其中要注意，上传文件，请求头，要设置成'Content-Type': 'multipart/form-data'
然后最有意思的一点就是，response headers和request headers这里可以不一样
image.png
network查看的请求的结果差不多是这样的
具体的上传文件流程基本就这样，持续更新~
网友评论