使用element组件库
<el-row>
<el-col :span="3" :offset="1">
图片跳转链接
</el-col>
<el-col :span="6">
<el-input
v-model="imgLink"
>
</el-input>
</el-col>
</el-row>
<el-row>
<el-col
:span="16"
:offset="1">
<el-upload
ref="uploadImg"
list-type="picture"
:file-list="fileList"
accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
:action="upLoadUrl"
:before-upload="onBeforeUploadImg"
:http-request="uploadRotationImage"
:on-change="fileChange"
>
<el-button
size="small"
type="primary"
>选择文件上传</el-button>
</el-upload>
</el-col>
</el-row>
srcipt文件
<script lang="ts">
interface fileIndex{
name:any;
url:any
}
export default class FirstPage extends Vue{
private upLoadUrl="http://xxx"; //上传图片后端接口地址
private imgLink='';
private fileList:fileIndex={ name:'', url:'' };
private onBeforeUploadImg(file:any){
//图片上传前图片大小和类型判断
const isImg = file.type === 'image/jpeg'|| 'image/jpg' || 'image/png';
const isSize = file.size/1024/1024 <1;
if(!isImg){
this.$message.error('上传文件只能是图片格式!');
}
if(!isSize){
this.$message.error('上传图片不能超过1MB!');
}
return isImg && isSize
}
private uploadRotationImage(param:any){
// 上传轮播图接口
const formData = new FormData();
formData.append('upload',param.file);
formData.append('urlLink',this.imgLink);
const upload = param.file; //图片文件参数
const urlLink =this.imgLink; //项目需要的另一个与文件对应的跳转链接参数
operateDataBaseApi
.uploadRotationImg({
formData
})
.then(res =>{
if(res.data.code===200){
console.log("添加轮播图片成功");
}else{
console.log('添加轮播图片失败',res.data.message);
}
})
.catch(
err =>{
console.log('添加轮播图片失败catch',err.message);
}
)
}
private fileChange(file:any){
//更新文件列表数据,文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
this.fileList=
{
name:file.name,
url:file.url
}
;
console.log('上传的文件列表fileList',this.fileList)
}
}
</script>
axios请求配置
import axios from 'axios'
import qs from 'qs' //需要先安装qs模块
const http = axios.create({
// 设置超时时间
timeout: 180000,
// baseURL: 'http://10.2.15.54:8111', // api的base_url
baseURL:process.env.VUE_APP_BASE_API,
responseType: 'json',
headers: { 'Content-Type': 'application/json'
},
});
http.defaults.transformRequest = (data, config) => {
// 在向服务器发送前,修改请求数据
if(!config['Content-Type']) return qs.stringfy(data);
switch(config['Content-Type'].toLowerCase()){
case 'application/json':{
//将javascript对象格式的请求数据转换为JSON格式再发送到服务器
return JSON.stringify(data)
}
case'multipart/form-data':{
//返回表单数据formData的键值对,
return data.formData
}
default:{
return qs.stringfy(data)
}
}
}
uploadRotationImg(data:any){
//轮播图上传接口
return http({
method:'post',
url:`/imgs/uploadRotationImg`,
headers:{
'Content-Type': 'multipart/form-data',
},
data
})
},
http请求配置说明
首先,http请求头的'Content-Type'应该设置为'multipart/form-data'。在向服务器发送formData数据时,如果在发送请求前没有修改请求数据,则发送数据直接就被qs进行序列化了,则FormData的内容无法被序列化,此时返回的data就是一个空的内容,从而导致请求失败。