require.js+vue开发微信上传图片组件

下面是“require.js+vue开发微信上传图片组件”的详细攻略。

准备工作

安装Require.js

可以使用npm来安装Require.js：

npm install requirejs

安装Vue.js

可以使用npm来安装Vue.js：

npm install vue

安装完之后，还需要在HTML中引入Require.js和Vue.js：

<script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>

开始开发

引入Require.js

我们需要首先在HTML中引入Require.js：

<script src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>

根据需要加载Vue

我们可以通过Require.js的require函数来加载Vue：

define('app', ['vue'], function(Vue) {
  // ...
});

定义Vue组件

接下来我们需要定义一个Vue组件，这个组件是用来上传图片的。我们可以传入一些参数来控制上传的行为，例如限制图片大小，限制上传数量等等。

define('app', ['vue'], function(Vue) {
  Vue.component('image-upload', {
    // ...
  });
});

实现上传行为

在组件中，我们可以通过表单提交来实现上传行为。下面是一个上传图片的表单示例：

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*">
  <input type="submit" value="Upload">
</form>

处理上传结果

上传完成后，我们需要处理上传结果。我们可以在表单提交成功后，服务器返回上传结果，并在Vue组件中处理这个结果。

define('app', ['vue'], function(Vue) {
  Vue.component('image-upload', {
    template: '<div>\
                <input type="file" @change="onFileSelected($event)">\
                <ul>\
                  <template v-for="(img, index) in images">\
                    <li>\
                      <img :src="img.url">\
                      <button @click="removeImage(index)">remove</button>\
                    </li>\
                  </template>\
                </ul>\
              </div>',
    data: function() {
      return {
        images: []
      };
    },
    methods: {
      onFileSelected: function(event) {
        var files = event.target.files;
        var self = this;
        for(var i=0; i<files.length; i++) {
          var formData = new FormData();
          formData.append('image', files[i]);
          axios.post('/upload', formData, {
            headers: {'Content-Type': 'multipart/form-data'}
          }).then(function(response) {
            self.images.push({url:response.data.url});
          }).catch(function(error) {
            console.log(error);
          });
        }
      },
      removeImage: function(index) {
        this.images.splice(index, 1);
      }
    }
  });
});

这里我们使用了vue-axios来发送POST请求。在上传完成后，服务器返回一个response.data.url来表示上传的图片的URL。我们把这个URL存放到数组中，然后在Vue模板中使用v-for来渲染图片。

示例说明

示例1：限制图片大小

我们可以在上传组件中加入一个参数maxSize，来限制上传的图片大小：

define('app', ['vue'], function(Vue) {
  Vue.component('image-upload', {
    props: {
      maxSize: {
        type: Number,
        default: 1024 * 1024 // 默认1MB
      }
    },
    template: '<div>\
                <input type="file" @change="onFileSelected($event)">\
                <ul>\
                  <template v-for="(img, index) in images">\
                    <li>\
                      <img :src="img.url">\
                      <button @click="removeImage(index)">remove</button>\
                    </li>\
                  </template>\
                </ul>\
              </div>',
    data: function() {
      return {
        images: []
      };
    },
    methods: {
      onFileSelected: function(event) {
        var files = event.target.files;
        var self = this;
        for(var i=0; i<files.length; i++) {
          if(files[i].size > this.maxSize) {
            alert('File size is too large!');
            continue;
          }
          var formData = new FormData();
          formData.append('image', files[i]);
          axios.post('/upload', formData, {
            headers: {'Content-Type': 'multipart/form-data'}
          }).then(function(response) {
            self.images.push({url:response.data.url});
          }).catch(function(error) {
            console.log(error);
          });
        }
      },
      removeImage: function(index) {
        this.images.splice(index, 1);
      }
    }
  });
});

这里我们在onFileSelected函数中加入了判断，如果图片大小大于maxSize，则提示用户文件过大，并跳过该文件的上传。

示例2：限制上传数量

我们可以在上传组件中加入一个参数maxNum，来限制上传的图片数量：

define('app', ['vue'], function(Vue) {
  Vue.component('image-upload', {
    props: {
      maxSize: {
        type: Number,
        default: 1024 * 1024 // 默认1MB
      },
      maxNum: {
        type: Number,
        default: 3 // 默认最多上传3张图片
      }
    },
    template: '<div>\
                <input type="file" @change="onFileSelected($event)">\
                <ul>\
                  <template v-for="(img, index) in images">\
                    <li>\
                      <img :src="img.url">\
                      <button @click="removeImage(index)">remove</button>\
                    </li>\
                  </template>\
                </ul>\
              </div>',
    data: function() {
      return {
        images: []
      };
    },
    methods: {
      onFileSelected: function(event) {
        var files = event.target.files;
        var self = this;
        for(var i=0; i<files.length; i++) {
          if(this.images.length >= this.maxNum) {
            alert('Too many files!');
            break;
          }
          if(files[i].size > this.maxSize) {
            alert('File size is too large!');
            continue;
          }
          var formData = new FormData();
          formData.append('image', files[i]);
          axios.post('/upload', formData, {
            headers: {'Content-Type': 'multipart/form-data'}
          }).then(function(response) {
            self.images.push({url:response.data.url});
          }).catch(function(error) {
            console.log(error);
          });
        }
      },
      removeImage: function(index) {
        this.images.splice(index, 1);
      }
    }
  });
});

这里我们在onFileSelected函数中加入了判断，如果上传的图片数量大于maxNum，则提示用户文件过多，并跳过上传行为。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：require.js+vue开发微信上传图片组件 - Python技术站