집 > 기사 > 웹 프론트엔드 > 이미지를 데이터베이스에 업로드하고 Vue에서 구현한 페이지에 표시하는 예

이미지를 데이터베이스에 업로드하고 Vue에서 구현한 페이지에 표시하는 예

亚连원래의: 2018-05-29 16:07:574670검색

이 글에서는 주로 vue에서 구현한 이미지를 데이터베이스에 업로드하고 페이지에 표시하는 기능을 소개합니다. vue.js를 기반으로 데이터베이스 작업 및 페이지 이미지 표시 관련 작업 기술을 예제 형식으로 분석합니다. 이 글의 예시를 참고하세요

이미지를 데이터베이스에 업로드하고 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(&#39;multer&#39;);
let storage = multer.diskStorage({
  //设置上传后文件路径，uploads文件夹会自动创建。
  destination: function (req, file, cb) {
    cb(null, &#39;./public/uploads&#39;)
  },
  //给上传文件重命名，获取添加后缀名
  filename: function (req, file, cb) {
    let fileFormat = (file.originalname).split(".");
    cb(null, file.fieldname + &#39;-&#39; + Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
});
//添加配置文件到multer对象。
let upload = multer({
  storage: storage
});
module.exports = upload;

upFileController.js

var muilter = require(&#39;./upFile.js&#39;);
//multer有single()中的名称必须是表单上传字段的name名称。
var upload=muilter.single(&#39;file&#39;);
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(&#39;file&#39;,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: &#39;&#39;
      };
//      console.log(params.photos_url,&#39;photos_url&#39;)
      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("文件格式不支持上传");
    }
}

위는 다음과 같습니다. 제가 모든 사람을 위해 정리한 내용이 앞으로 모든 사람에게 도움이 되기를 바랍니다.

이미지를 데이터베이스에 업로드하고 Vue에서 구현한 페이지에 표시하는 예

관련 기사