vue结合element实现自定上传图片到后端数据库功能

使用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就是一个空的内容，从而导致请求失败。