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'
                };
            }
        },
    };
  1. 不使用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'
    }
  }
},

你可能感兴趣的:(vue,element)