Vue CLI 搭建项目实现上传图片

[sfsoul]

按需引入 Element UI

借助 babel-plugin-component 可实现按需引入，来达到减小项目体积的目的。

npm i babel-plugin-component -D

修改 .babelrc 文件：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

[sfsoul]

Error: Cannot find module 'babel-preset-es2015' from '/Users/jing_zhang/Desktop/picture-bed'

[sfsoul]

图片上传 === 服务端

[sfsoul]

Node 端设置支持跨域

• Node 设置cors，后端解决跨域问题
• Node api跨域设置

[sfsoul]

axios 设置拦截器

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

[sfsoul]

Node 访问本地静态资源

const express = require('express');
const app = express();

// 静态资源
app.use(express.static('public'));

// 起服务
app.listen(8888, () => {
    console.log('listening on port 8888')
})

• node 搭建本地服务器，并访问本地图片视频等静态资源

[sfsoul]

multer

• Express 上传图片
• 图片上传、预览以及图片删除

[sfsoul]

参考文章

• 前后端分离架构的上传文件问题