elementui图片上传 element-ui上传图片

转载

mob64ca14038b36 2024-03-27 10:18:18

文章标签 elementui图片上传 javascript ui 数据库 ViewUI 文章分类 机器学习人工智能

前端组件

具体的样式配置可以见element-ui的官网
第一种配置：选择图片后直接上传(action是服务器地址，http-request是上传到服务器前拦截request进行处理的操作)：

<el-upload
    class="upload-demo"
    ref="upload"
    :action=domain
    :http-request=uploadImage
    :file-list="fileList"
    list-type="picture-card"
    :before-upload="beforeUpload"
    multiple>
    <i class="el-icon-plus"></i>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
复制代码

一个参考的uploadImage()函数配置(这里主要需要重命名图片名，我使用mongoose的Types生成一个唯一的ObjectId来进行重命名，也可以使用时间戳等方式)：

async uploadImage(req) {
  const config = {
      headers: {'Content-Type': 'multipart/form-data'}
  };
  let filetype = ''
  if (req.file.type === 'image/png') {
      filetype = 'png'
  } else {
      filetype = 'jpg'
  }
  const keyName = this.bucket +  "-" + Types.ObjectId().toString() +  '.' + fileType;
  const formdata = new FormData();
  formdata.append('file', req.file);
  formdata.append('key', keyName);
  axios.post('/api/uploadImage', formdata, config)
  .then(res => {
      this.fileList.push({
          name: res.data.name,
          url: res.data.url,
      });
      console.log('image upload succeed.');
  })
  .catch(err => {
      console.log(err.message)
  })
},
复制代码

注意到：我们如果将图片上传到一个跨域服务器是需要进行跨域处理的，后面我们就可以使用'/api'代替服务器地址。
① 在Vue中我们可以修改config/index.js：

proxyTable: {
    '/api': {
        target: 'https://example.com', // 接口的域名
        secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {'^/api': ''}
    }
},
复制代码

② 在Nuxt中我们可以配置nuxt.config.js：

modules: ['@nuxtjs/axios','@nuxtjs/proxy'],
proxy: [
    '/api',
    {
        target: 'https://example.com',
        pathRewrite: {'^/api': '/'}
    }
],
复制代码

另一种配置：点击上传按钮后才上传到服务器(主要将上传组件的:auto-upload设置为false)。如果要实现图片预览可以添加一个处理函数:on-change="handleSuccess"：

handleSuccess(res, files) {
    this.fileList = [];//因为我这里每次上传只选择一张图片，所以清空
    let file = files[files.length - 1];
    let name = file.name;
    if(this.beforeUpload(file.raw)) {
        let imageUrl = window.URL.createObjectURL(file.raw);
        this.imageFile = file;//保存imageFile
        this.fileList.push({name: name, url: imageUrl});
    }
},
复制代码

上传到七牛云可以对uploadImage()函数进行修改：

try {
    //获取上传凭证token
    let uptoken = await this.$store.dispatch('getUploadToken');
    const formdata = new FormData();
    formdata.append('file', this.imageFile.raw);
    formdata.append('token', uptoken);//添加凭证
    formdata.append('key', keyName);
    return new Promise((resolve, reject) => {
        axios.post('/upQiniu', formdata, config).then(res => {
        this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key;
        this.fileList = [];
        this.imageFile = null;
        resolve(this.imageUrl);
        });
    });
    } catch (e) {
        console.log('post failed!' + e.message);
    }
复制代码

后面我们要上传可以直接调用uploadImage函数异步返回图片上传后的路径

后端配置

上传，为了避免暴露密钥，凭证token应该从后端获取：

const qiniu = require('qiniu')
//util/onfig/qiniu.js中放置七牛云的访问key和密钥
import {accessKey, secretKey} from '../util/config/qiniu'
//例如我在Vuex Store的action中添加了以下函数
getUploadToken() {
    const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    const options = {
        scope: 'xxxxx',//你在七牛云的空间名字
    };
    const putPolicy = new qiniu.rs.PutPolicy(options);
    return putPolicy.uploadToken(mac);
},
复制代码

上传到本地文件夹，express+multiparty配置图片上传服务器:

router.post('/uploadImage', async(req, res, next) => {
var form = new multiparty.Form();
form.uploadDir = config.imagePath;
form.maxFieldsSize = 2 * 1024 * 1024;
var newName;
await form.parse(req, (err, fields, files) => {
    if(err) {
        return res.status(500).json({message: "upload image failed: " + err});
    }
    newName = fields.key[0];//因为element-ui每次上传一张图片，所以这里考虑取出第一个即可
    let newPath = config.imagePath + newName;
    let originalPath = files.file[0].path;
    try {
        fs.existsSync(originalPath);//本地图片路径是否存在
        fs.renameSync(originalPath,newPath);//重命名，这里最好使用renameSync强制命名
        return res.status(200).json({name: newName, url: config.imageURL + newName});
    } catch (error) {
        return res.status(500).json({message: "upload image failed: " + error});
    }
  });
});
复制代码