vue达成的上传图片到数据库并出示到页面效果示例,vue上传图片组件编写代码

本文实例陈述了vue完毕的上传图片到数据库并出示到页面效果。分享给大家供大家仿效,具体如下:

正文实例教大家哪些编写三个vue上传图片组件,具体如下

浏览器上传图片到服务端,作者用过三种艺术:

vue.js动态获取数据库数据

vue达成的上传图片到数据库并出示到页面效果示例,vue上传图片组件编写代码。1、点击上传图片,弹出选拔图片选项框。

1.率先得有贰个[type=file]文件标签並且隐敝,changge事件来赢得图片:

1.地点图片转换来base64,然后通过普通的post央浼发送到服务端。

(通过vue.cli和webpack搭建的条件)

页面代码:

<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 

操作简便,适合小图,以及一旦想包容低版本的ie不可能用此方法

1.率先本人先在开立多少个静态的data.json文件,在static下开创json文件夹,(webpack遇到下,静态的文书放在static目录下)

<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="亚洲必赢官网 1"/>

2.接触遮蔽的文本标签:(通过原生的click来触发)

2.因而form表单提交。

{
  "data":[
    {"id":1,"name": "yidong", "age": "11" },
    {"id":2,"name": "yidong2", "age": "12" },
    {"id":3,"name": "yidong3", "age": "13" },
    {"id":4,"name": "yidong4", "age": "14" },
    {"id":5,"name": "yidong5", "age": "15" },
    {"id":6,"name": "yidong6", "age": "16" },
    {"id":7,"name": "yidong7", "age": "17" }
  ]
}

由于我们要安装上传图片的体裁,所以把input掩饰,并要做如下操作把input的点击事件给div框:

document.getElementById('upload_file').click() 

form表单提交图片会刷新页面,也得以时form绑定到贰个隐敝的iframe上,能够完成无刷新提交数据。可是倘使想传输多条form表单数据,需求写过多dom,同临时间还要写iframe,太劳碌。

1.这里须要用到vue-resource,在我们的种类里面安装:

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

3.赢得file文件之中的值方法:fileChange($event)

眼下感觉比较根本的措施正是透过axios的post哀告,发送form数据到后台。

nam install vue-ressource --save-dev

2、在api接口的controller层参与五个文件,命名自个儿定,如:

fileChange(el){ 
  if (!el.target.files[0].size) return;//判断是否有文件数量 
  this.fileList(el.target.files);//获取files文件组传入处理 
  el.target.value = ''//清空val值,以便可以重复添加一张图片 
 } 

html部分,至于分界面优化,能够把input
file的opacity设置为0,点击其父容器,即触发file

2.在main.js中引用vie-resource

upFile.js

4.处理files文件组

复制代码 代码如下:

import VueResource from 'vue-resource';
Vue.use(VueResource)
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;

获得传入单个图片文件

<input class=”file” name=”file” type=”file”
accept=”image/png,image/gif,image/jpeg” @change=”update”/>

3.代码写在 Home.vue组件下:

upFileController.js

fileList(files){ 
   for (let i = 0; i < files.length; i++) { 
    this.fileAdd(files[i]); 
   } 
  } 

axios的post央浼,发送form数据部分,那样就可以无刷新的提交form数据到后台

export default{
    data(){
      return {        
        user:null,
      }
    },
    created () {
      this.fetchData()
    },
    watch:{
      '$route':'fetchData'
    },
    methods:{
      fetchData(){              this.$http.get('./../../static/json/data.json').then((response)=>{  
          console.log(response.data.data);
        })
      }
    }
  }
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
};

拍卖获取到的图形文件,总结文件大小,转图片为base64以供突显

update(e){
     let file = e.target.files[0];      
     let param = new FormData(); //创建form对象
     param.append('file',file,file.name);//通过append向form对象添加数据
     param.append('chunk','0');//添加form表单中其他数据
     console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
     let config = {
      headers:{'Content-Type':'multipart/form-data'}
     }; //添加请求头
     this.axios.post('http://upload.qiniu.com/',param,config)
     .then(response=>{
      console.log(response.data);
     })    
}

与上述同类大家就能够用vue.js获取到从后台拿到的数码json数据了。

3、在页面师长图片的地址存到数据库

fileAdd(file){ 
   this.size = this.size + file.size;//总大小 
   let reader = new FileReader(); 
   reader.vue = this; 
   reader.readAsDataURL(file); 
   reader.onload = function () { 
    file.src = this.result; 
    this.vue.imgList.push({ 
     file 
    }); 
   } 
  }, 

以下一些是扩张

上述就是本文的全体内容,希望对我们的读书抱有援助,也愿意大家多多帮忙脚本之家。

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

5.文件大小换算

vue开拓景况下,上传图片到七牛

你恐怕感兴趣的文章:

  • 基于VUE选取上传图片并页面显示(图片可去除)
  • vue.js 上传图片实例代码
  • 据书上说vue+
    bootstrap完毕图片上传图片展现效果
  • VUE
    axios上传图片到七牛的实例代码
  • vuejs使用FormData达成ajax上传图片文件
  • vue上传图片组件编写代码
  • vue axios
    表单提交上传图片的实例
  • vue完成的上传图片到数据库并出示到页面效果示例

意在本文所述对我们vue.js程序设计有所补助。

bytesToSize(bytes){ 
  if (bytes === 0) return '0 B'; 
  let k = 1000, // or 1024 
   sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 
   i = Math.floor(Math.log(bytes) / Math.log(k)); 
  return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; 
 }, 

这段时间入手的约能人项目,需求上传图片到七牛,可是认为只是简短的上传图片还亟需引七牛的js,太劳碌了,就本身整个从简。完毕逻辑:获取后台重返的七牛token,然后axios的post央浼,发送form数据到七牛。

您大概感兴趣的作品:

  • 听别人讲VUE选择上传图片并页面展现(图片可去除)
  • vue.js 上传图片实例代码
  • 听他们讲vue+
    bootstrap达成图片上传图片显示效果
  • VUE
    axios上传图片到七牛的实例代码
  • vuejs使用FormData落成ajax上传图片文件
  • vue上传图片组件编写代码
  • vue axios
    表单提交上传图片的实例
  • vue.js获取数据库数据实例代码

6.拖拽上传

 七牛的token是其平台封装好的,直接在融洽服务器配置就能够获得到
在其官英特网能够找到间接能用的代码 
,在七牛平台获得到后,再次来到给前台间接拿就好了

<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)"> 
   或者将文件拖到此处 
</div> 


dragenter(el){ 
  el.stopPropagation(); 
  el.preventDefault(); 
 }, 
 dragover(el){ 
  el.stopPropagation(); 
  el.preventDefault(); 
 }, 
 drop(el){ 
  el.stopPropagation(); 
  el.preventDefault(); 
  this.fileList(el.dataTransfer.files); 
 } 

以下是平昔上传图片到七牛,无需安装七牛非常不好的js,只必要经过七牛的form表单上传就行了。

提及底效果如下:

 update(e){
     let file = e.target.files[0];
     let d = new Date();
     let type = file.name.split('.');
     let tokenParem = {
       'putPolicy':'{\"name\":\"$(fname)\",\"size\":\"$(fsize)\",\"w\":\"$(imageInfo.width)\",\"h\":\"$(imageInfo.height)\",\"hash\":\"$(etag)\"}',
       'key':'orderReview/'+d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()+'/'+d.valueOf()+'.'+type[type.length-1],
       'bucket':this.domain,//七牛的地址,这个是你自己配置的(变量)
     };
     let param = new FormData(); //创建form对象
     param.append('chunk','0');//断点传输
     param.append('chunks','1');
     param.append('file',file,file.name)
     console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
     let config = {
      headers:{'Content-Type':'multipart/form-data'}
     };
    //先从自己的服务端拿到token
     this.axios.post(api.uploadToken,qs.stringify(tokenParem))
      .then(response=>{
        this.token = response.data.uploadToken;
        param.append('token',this.token);
        if(this.images.length>8){
          alert('不能超过9张');
          return;
        }
        this.uploading(param,config,file.name);//然后将参数上传七牛
        return;
      })
   },
   uploading(param,config,pathName){
    this.axios.post('http://upload.qiniu.com/',param,config)
     .then(response=>{
      console.log(response.data);
      let localArr = this.images.map((val,index,arr)=>{
       return arr[index].localSrc;
      })
      if(!~localArr.indexOf(pathName)){
       this.images.push({'src':this.showUrl+response.data.key,'localSrc':pathName});
      }else{
        alert('已上传该图片');
      }
     })
   },    

亚洲必赢官网 2

上述便是本文的全体内容,希望对大家的读书抱有支持,也愿意大家多多支持脚本之家。

点击展开源码

您也许感兴趣的篇章:

  • 依靠VUE采取上传图片并页面显示(图片可去除)
  • vue.js 上传图片实例代码
  • 依照vue+
    bootstrap完成图片上传图片显示效果
  • vuejs使用FormData达成ajax上传图片文件
  • vue上传图片组件编写代码
  • vue axios
    表单提交上传图片的实例
  • vue.js获取数据库数据实例代码
  • vue达成的上传图片到数据库并出示到页面效果示例

亚洲必赢官网 ,如上就是本文的全体内容,希望对我们的就学抱有协助,也冀望大家多多帮助脚本之家。

您恐怕感兴趣的篇章:

  • 依赖VUE选取上传图片并页面突显(图片可去除)
  • vue.js 上传图片实例代码
  • 依附vue+
    bootstrap完结图片上传图片突显效果
  • VUE
    axios上传图片到七牛的实例代码
  • vuejs使用FormData完毕ajax上传图片文件
  • vue axios
    表单提交上传图片的实例
  • vue.js获取数据库数据实例代码
  • vue完毕的上传图片到数据库并出示到页面效果示例
网站地图xml地图