vue는 이미지를 데이터베이스에 업로드하고 프런트엔드 페이지에 표시합니다.

이번에는 vue가 데이터베이스에 이미지를 업로드하고 프런트엔드 페이지에 표시할 때의 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례를 살펴보겠습니다.

1. 클릭하여 사진을 업로드하면 사진 선택 옵션 상자가 나타납니다.

페이지 코드:

<p class="form-signin-heading" id="btnUpload" @change="upload">上传图片</p>
<input type="file" name="avatar" id="avatar" multiple="multiple" @change="upload">
<img :src="&#39;http://localhost:8888&#39;+item.photos_url" alt=""/>

업로드된 이미지의 스타일을 설정하고 싶기 때문에 입력을 숨기고 다음 작업을 수행하여 입력의 클릭 이벤트를 p 상자로 보냅니다.

mounted: function () {
 var upload = document.getElementById("btnUpload");
 var avatar = document.getElementById("avatar");
 upload.onclick =function(){
  avatar.click(); //注意IE的兼容性
 };
}

2에 2개를 추가합니다. api 인터페이스 파일의 컨트롤러 레이어 이름을 직접 지정하세요. 예:

upFile.js

let multer=require('multer');
let storage = multer.diskStorage({
  //设置上传后文件路径，uploads文件夹会自动创建。
  destination: function (req, file, cb) {
    cb(null, './public/uploads')
  },
  //给上传文件重命名，获取添加后缀名
  filename: function (req, file, cb) {
    let fileFormat = (file.originalname).split(".");
    cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
});
//添加配置文件到multer对象。
let upload = multer({
  storage: storage
});
module.exports = upload;

upFileController.js

var muilter = require('./upFile.js');
//multer有single()中的名称必须是表单上传字段的name名称。
var upload=muilter.single('file');
function dataInput(req, res) {
  upload(req, res, function (err) {
    //添加错误处理
    if (err) {
      return console.log(err);
    }
    //文件信息在req.file或者req.files中显示。
    let photoPath = req.file.path;
    photoPath = photoPath.replace(/public/,"");//将文件路径中的public\去掉，否则会和静态资源配置冲突
    //将photoPath存入数据库即可
    console.log(photoPath);
    res.send(photoPath);
  });
}
module.exports = {
  dataInput
};

3 이미지 주소를 페이지의 데이터베이스에 저장하세요

upload: function (e) {
    var that = this;
    let formData = new window.FormData();
    let file = e.target.files[0];
    formData.append('file',file);//通过append向form对象添加数据
    //利用split切割，拿到上传文件的格式
    var src = file.name,
     formart = src.split(".")[1];
    //使用if判断上传文件格式是否符合
    if (formart == "jpg" || formart == "png" ||
     formart == "docx" || formart == "txt" ||
     formart == "ppt" || formart == "xlsx" ||
     formart == "zip" || formart == "rar" ||
     formart == "doc") {
     //只有满足以上格式时，才会触发ajax请求
     this.$axios.post(this.$api.personalCenter.upFile,formData).then(function (res) {
      that.upFileData = res.data;
     }).then(function (res) {
      var params = {
       photos_url: that.upFileData,
       photo_des: ''
      };
//      console.log(params.photos_url,'photos_url')
      that.$axios.post(that.$api.personalCenter.wallAdd,qs.stringify(params)).then(function (res) {
       console.log(res.data);
       that.$options.methods.imgList.bind(that)();
      }).catch(function (err) {
       console.log(err);
       console.log("请求出错");
      })
     })
    } else {
     alert("文件格式不支持上传");
    }
}

믿습니다. 이 글의 사례를 읽고 방법을 익혔습니다. PHP 중국어 웹사이트의 다른 관련 글도 주목해주세요!

추천 도서:

js 데이터 구문 분석 기술 요약

JS 문자열 연산에 대한 자세한 설명

위 내용은 vue는 이미지를 데이터베이스에 업로드하고 프런트엔드 페이지에 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!