vue配合vant进行图片上传

vue中实现文件上传

1. 前段时间在vue的学习中我遇到了一个比较难以解决的问题，那就是文件上传，之前一直对文件上传不是很理解，不过通过这次查资料也算有点心得，在此分享给大家
2. 想做文件上传你就必须要知道浏览器发送请求的结构，分为三个部分，请求行，请求头，请求体，因为文件上传在请求中展示的形式为2进制字符形式，而我们在使用vue插件axios进行数据的交互传输之后返回的是一个json数据，所以我们需要将请求头中的Content-Type换为multipart/form-data转换一个格式以下为代码部分：

服务器代码：

const router = require('express').Router();
const fs = require('fs');
const moment = require('moment');
const multer = require('multer');

const path = './public/uploads';
if (!fs.existsSync(path)) {
  fs.mkdirSync(path, { recursive: true });
}
const todayDir = moment().format('YYYYMMDD');
if (!fs.existsSync(`${path}/${todayDir}`)) {
  fs.mkdirSync(`${path}/${todayDir}`, { recursive: true });
}

var storage = multer.diskStorage({
  // 文件上传路径
  destination: function (req, file, cb) {
      cb(null, `${path}/${todayDir}`);
  },
  // 上传之后的文件名, 通过req.file.filename获取
  filename: function (req, file, cb) {
    cb(null, Date.now()+'.'+file.originalname.split('.').slice(-1))
  }
})

const upload = multer({ storage: storage });

router.post('/file_upload', upload.single('file'), (req, res) => {
  console.log("object")
  res.json({
    code: 'success',
    message: '文件上传成功',
    info: `/uploads/${todayDir}/${req.file.filename}`,
  });
})

module.exports = router;

客户端向服务器发送请求，在这我用的是axios插件，封装一个axios方法

import axios from 'axios';

const instance = axios.create({
    //超时响应时间
    timeout:5000,
});

export function get(url,config){
    return instance.get(url,config);
}

export function post(url,data,config){
    return instance.post(url,data,config);
}

在创建一个文件封装发送请求的方法

import { post } from '../utils/request';
export function uploadImg(file) {
  // eslint-disable-next-line quotes
  return post('http://192.168.15.47:3000/common/file_upload', file, {
    headers: {
      'content-type': 'multipart/form-data',
    },
  });
}

在这个案例中我是用的是vuex进行非相关组件间的传参所以需要先对vuex进行设置

/* eslint-disable eqeqeq */
import {  uploadImg,  } from '../services/request';

const member = {
//命名空间开启
  namespaced: true,
  state: {
    uploadResult: {},
  },
  mutations: {
//同步调用方法，将payload的值赋给state
    uploadImg(state, payload) {
      state.uploadResult = payload;
    },
 
  },
  actions: {
    async filleUploadImg({ commit }, payload) {
      // eslint-disable-next-line no-unused-vars
      const result = await uploadImg(payload);
      //在异步方法中调用同步方法
      commit('uploadImg', result.data);
    },
  
};

export default member;

在组件中通过xuex的映射属性调用

//组建中使用vant上传方法



import { mapActions,mapState } from 'vuex';
export default {
  data(){
    return{
      show:false,
       fileList: [

      ]
    }
  },
  computed:{
    ...mapState('member',['uploadResult'])
  },
  methods:{
    ...mapActions('member',['filleUploadImg']),
    beforeRead(file) {
      if (file.type !== 'image/jpeg') {
        this.$notify('请上传 jpg 格式图片');
        return false;
      }
      return true;
    },
     afterRead(file) {
        const fromdata=new FormData();
        fromdata.append('file',file.file);
        console.log(file.file);
        const result =  this.filleUploadImg(fromdata);
    },
     async uploadFindOneImage(){
      //调用更新方法，拼接路径
       let url ='http://192.168.15.47:3000'+this.uploadResult.info;
        //进行更新设置
    },

  },

}

以上就是解决vue配合Vant图片上传的方法，希望可以帮助到需要的人