项目总结-图片上传

Vue

html部分

注意:

  1. 连续上传同一张图片时不会触发change事件，添加key值，当 上传后改变key值
  2. type="file"
<input  placeholder=""
        type="file"
        ref="uploadAvatar"
       :key="changePhotoKey"
       @change="handleChangeAvatar">

js部分

//点击其他按钮触发图片上传input框的点击
 chooseAvatar() {
  this.$refs.uploadAvatar.click();
},
//图片上传后的处理
handleChangeAvatar() {
  let tempFiles = this.$refs.uploadAvatar.files;
  let formData = new FormData();
  formData.append('image', tempFiles[0]);
  formData.append('type', 'logoImg');
  this.$ajax.post(`${BASE_URL}/b/update-visiting-card-image?kfuin=${this.currentKfuin}`, formData)
    .then(res => {
      // res一般有后端返回图片地址
      if (res.errcode === 0) {
        this.cardInfo.FHeadUrl = res.data.image_url;
        this.FHeadUrl = res.data.key;
        this.changePhotoKey += 1;
      } else {
        this.$toast(res.errmsg || res);
      }
    }).catch(err => {
    this.$toast(err);
  });
}

接口展示

image
image

H5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="file" id="fileInput"/>
<img src="" alt=""/>
</body>
</html>
<script>
  let image = document.querySelector("img")
  document.getElementById('fileInput').onchange = function () {
    let tempFiles = this.files;
    let reader = new FileReader();
    reader.readAsDataURL(tempFiles[0]);
    reader.onload = function (e) {
      console.log(e); //查看对象属性里面有个result属性，属性值，是一大串的base64格式的东西，这个就是我们要的图片
      console.log(this.result);//取得数据 这里的this指向FileReader（）对象的实例reader
      image.setAttribute("src", this.result)//赋值给img标签让它显示出来
    }
  }
</script>

image

node.js

  1. 引入formidable
    const formidable = require('formidable');
  2. 使用
//图片上传
router.post("/uploadImg", function (req, res) {
    let form = new formidable.IncomingForm();
    form.encoding = 'utf-8';
    form.uploadDir = 'public/images'; // 路径要写对不然没效果
    form.keepExtensions = true;// 保留后缀
    form.maxFieldsSize = 2 * 1024 * 1024;// 大小限制
    //处理图片
    form.parse(req, function (err, fields, files) {
        // console.log(err);
        console.log(files);//图片对象
        // console.log(fields);//图片传过来时携带的其他字段
        let newPath = form.uploadDir + "/" + files.image.originalFilename
        fs.renameSync(files.image.filepath, newPath);  //重命名
        res.send({imgUrl: host + "/images/" + files.image.originalFilename,key:"/images/" + files.image.originalFilename})
    })
});

image

posted @ 2022-06-27 17:45  风紧·扯呼  阅读(122)  评论(0)    收藏  举报