vue 上传图片

上传图片，我们在做项目过程会经常遇到，在此，总结一下，方便以后工作，也可以为有兴趣的朋友提供一个思路，请看代码

load.html





    
    
    
    
    




    

        
    

    

        

            
        
    
    

        暂时缓存
    
    

        

            
        
    

load.js 

requirejs.config({
    baseUrl: '../js/lib',//参照于引入这个js文件的index.html页面的相对路径,因为此时mian.js文件已经导入到了index.html
    paths: {
        'vue'   : 'vue.min',
        'axios':'axios.min',
        'vue-resource':'vue-resource',
        'localforage':'localforage',
        'mock':'mock-min',
    },

});
define([
    'vue',
    'axios',
    'localforage',
    ],function (
    Vue,
    axios,
    LocalForage) {
    var aa = {
        init:function () {

            var app = new Vue({
                el:'#upload',
                data: {
                    imgUrl:[],
                },
                methods:{
                    // 点击图片模拟点击input
                    selectimg:function(){
                        // 原生方法模拟点击input，选择图片
                        document.getElementById('img').click()
                    },
                    // 选中图片回显
                    getimg:function (e) {
                        var vm = this;
                        // var myImg = document.getElementById('img');
                        var myImg = e.target;
                        var imgValu = myImg.value;
                        console.log(myImg.files)
                        // console.log(imgValu.match(/.doc|.gif|.png|.bmp/i))
                        // if(!imgValu.match(/.doc|.gif|.png|.bmp/i)){
                        //     alert('上传图片不符合要求');
                        //     return false;
                        // }
                        //获得一个http格式的url路径:mozilla(firefox)||webkit or chrome
                        var windowURL = window.URL || window.webkitURL;
                        //createObjectURL创建一个指向该参数对象(图片)的URL
                        for(var i = 0;i 

load.scss
.upload{
  .select{
    width: 60px;
    height: 60px;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .img-wrap{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .img{
      display: inline-block;
      width: 120px;
      height: 120px;
      overflow: hidden;
      flex: 0 0 100px;
      text-align: center;
      margin-top: 10px;
      cursor: pointer;
      border: 1px solid #cdcdcd;
      padding: 10px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .set-cache{
    position: fixed;
    bottom: 30px;
    width: 100%;
    button{
      width: 90%;
      margin: 0 20px;
    }
  }
}

注意：

1、通过点击上传图片，模拟点击隐藏起来的上传图片form表单

selectimg:function(){
    // 原生方法模拟点击input，选择图片
    document.getElementById('img').click()
},

2、获取上传图片资源，回显在页面

var windowURL = window.URL || window.webkitURL;
//createObjectURL创建一个指向该参数对象(图片)的URL
 for(var i = 0;i 

3、通过html5提供的FormData属性上传图片，通过append 添加需要的参数

var form = document.getElementById('imgForm');
var formData = new FormData(form);
formData.append ("openId" , "12456");//如果有其他参数还可以通过该方法进行传递
formData.append ("imageType" , 1);