vue+axios+element 图片上传

vue+axios+element 图片上传

1. 默认使用element的el-upload
2. action传入上传图片的的后台路径，data传入所需的额外参数

<template>
	<el-upload
           class="upload-demo"
           drag
           :action="uploadUrl"
           :data="data"
           :on-change="onChange"
           multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
</template>
  export default {
        name: 'upload',
        computed: {
            uploadUrl: function() {
                // 上传地址
                let uploadImage = '/index.php/uploadImage';
                return uploadImage;
            },
            // 额外参数
            data() {
                return {
                    'atustr': 'atustr',
                    'token': 'token',
                    'sign':'sign'
                };
            }
        },
    };

2. 不使用action上传

   • 在接口中不需要单独设置headers头

   <el-upload
              :class="{ hideUpload: hideUpload }"
              :auto-upload='false'
              action="#"
              :on-change="handleChange">
       <i class="el-icon-plus"></i>
   </el-upload>
    export default {
        name: 'upload',
        methods: {
               handleChange(file, fileList) {
                   let atustr = 'atustr';
                   let token = 'token';
                   let sign = 'sign';
                   // 使用 FormData
                   let fd = new FormData();
                   fd.append('image', file.raw);
                   fd.append('atustr', 'atustr');
                   fd.append('token', 'token');
                   fd.append('sign', 'sign');
                   // 二次封装的 axios 
                   uploadImage(fd).then(res => {
                       console.log(res);
                   });
               },
           }
   }
   
   

   • request.js

     // 使用axios
     import axios from 'axios';
     const service = axios.create({
         timeout: 5000
     });
     
     service.interceptors.request.use(
         config => {
             return config;
         },
         error => {
             console.log(error);
             return Promise.reject();
         }
     );
     service.interceptors.response.use(
         response => {
             if (response.status === 200) {
                 return response.data;
             } else {
                 Promise.reject();
             }
         },
         error => {
             console.log(error);
             return Promise.reject();
         }
     );
     export default service;
     

   • 上传接口

     import request from '@/utils/request';
     export function uploadImage(data) {
         return request({
             url: '/index.php/uploadImage',
             method: 'post',
             data: data
         });
     }
     

跨域问题

proxyTable: {
  '/api': {
    target: 'http://127.0.0.1:3002',//要访问的后端接口
    ws: true,        //如果要代理 websockets，配置这个参数
    secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true,  //是否跨域
    pathRewrite:{
      '^/api':'/api'
    }
  }
},