亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue實現的上傳圖片到數據庫并顯示到頁面功能示例

發布時間:2020-08-24 19:42:19 來源:腳本之家 閱讀:751 作者:shh520_ty 欄目:web開發

本文實例講述了vue實現的上傳圖片到數據庫并顯示到頁面功能。分享給大家供大家參考,具體如下:

1、點擊上傳圖片,彈出選擇圖片選項框。

頁面代碼:

<div class="form-signin-heading" id="btnUpload" @change="upload">上傳圖片</div>
<input type="file" name="avatar" id="avatar" multiple="multiple" @change="upload">
<img :src="'http://localhost:8888'+item.photos_url" alt=""/>

由于我們要設置上傳圖片的樣式,所以把input隱藏,并要做如下操作把input的點擊事件給div框:

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

2、在api接口的controller層加入兩個文件,命名自己定,如:

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("文件格式不支持上傳");
    }
}

希望本文所述對大家vue.js程序設計有所幫助。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

合江县| 遵义县| 巢湖市| 靖边县| 怀柔区| 定州市| 苍溪县| 长岛县| 七台河市| 额济纳旗| 邵东县| 沽源县| 文昌市| 财经| 绥阳县| 西乌珠穆沁旗| 当阳市| 贵阳市| 乡宁县| 大丰市| 防城港市| 三台县| 赫章县| 惠州市| 深水埗区| 镇沅| 临夏市| 汝城县| 建平县| 长兴县| 伊宁县| 名山县| 浦东新区| 汉沽区| 昌宁县| 舟山市| 旬邑县| 临沂市| 清水县| 龙泉市| 临武县|