vue+Node.js实现图片上传功能（从零开始）

1.这里使用的是阿里云的oss存储，新建一个bucket,这里是文件存储的列表。

 2 Node.js

在你的项目中引入ali-oss

npm install ali-oss --save

下载完之后新建一个js文件用于上传图片功能（我这里为upload,js）

后端代码为:

​
let OSS = require('ali-oss');
const path = require("path")
const fs = require('fs')



upload = async (req, res) => {
    let client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
        region: '***********',
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        accessKeyId: '**************',
        accessKeySecret: '**************',
        bucket: '***********',
        secure: true   //开启https
    });

    const headers = {
        // 指定该Object被下载时网页的缓存行为。
        // 'Cache-Control': 'no-cache', 
        // 指定该Object被下载时的名称。
        // 'Content-Disposition': 'oss_download.txt', 
        // 指定该Object被下载时的内容编码格式。
        // 'Content-Encoding': 'UTF-8', 
        // 指定过期时间。
        // 'Expires': 'Wed, 08 Jul 2022 16:57:01 GMT', 
        // 指定Object的存储类型。
        // 'x-oss-storage-class': 'Standard', 
        // 指定Object的访问权限。
        // 'x-oss-object-acl': 'private', 
        // 设置Object的标签，可同时设置多个标签。
        // 'x-oss-tagging': 'Tag1=1&Tag2=2', 
        // 指定CopyObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
        // 'x-oss-forbid-overwrite': 'true', 
    };
    // 文件路径
    var filePath = './' + req.files[0].path;
    // 文件类型
    var temp = req.files[0].originalname.split('.');
    var fileType = temp[temp.length - 1];
    var lastName = '.' + fileType;
    // 构建图片名
    var fileName = Date.now() + lastName;
    // 图片重命名
    fs.rename(filePath, './public/image/' + fileName, async (err) => {
        if (err) {
            return ''
        } else {
            var localFile = './public/image/' + fileName;
            var key = fileName
            try {
                // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
                // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
                const result = await client.put(key, path.normalize(localFile));
                // const result = await client.put('exampleobject.txt', path.normalize('D:\\localpath\\examplefile.txt'), { headers });   
                fs.unlink(localFile, function () { })
                res.send({
                    status: 0,
                    data: result.url
                })
            } catch (e) {
                console.log(e);
            }
        }
    });

}


module.exports = {
    upload
}


​

使用到的 accessKeyId,accessKeySecret可以在下图的地方找到

 

 图片需要通过multer来处理

npm install multer --save

然后再暴露接口的时候进行调用

var express = require('express');
const upload = require("../controllers/upload")
const multer = require("multer");
var router = express.Router();

router.post("/upload", multer({
    //设置文件存储路径
    dest: "public/image",
}).array("file", 1), upload.upload);

module.exports = router;

这样，后端代码就已经解决了。

3 vue

这里把上传图片功能封装为一个公共组件

<template>
  <div>
    <wu-dialog :show.sync="dialogVisible" title="上传图片" @close="close" >
      <el-upload
        class="avatar-uploader"
        action="http://localhost:5000/file/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :headers="headers"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </wu-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: this.visible,
      imageUrl: "",
      headers: {
        token: localStorage.getItem("token") || "",//携带自己的token
      },
    };
  },
  watch: {
    visible(n) {
      this.dialogVisible = n;
    },
    dialogVisible(n) {
      this.$emit("update:visible", n);
    },
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.imageUrl =res.data
      console.log(this.imageUrl);
      this.$emit("getData", this.imageUrl);
      this.dialogVisible = false;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    close() {
      Object.assign(this.$data, this.$options.data());
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

然后在main.js中注册为全局组件

import wuUpload from "@/components/wu-upload/wu-upload.vue"

Vue.component("wu-upload", wuUpload)

实现的效果如下：

这样，一个完整，简单的图片上传功能就已经实现了