input file图片上传(原始写法,但存在各种兼容问题)

html内容

<input v-if="uploadingFlag" @change="handleFileChange" ref="inputer" type="file" accept="image/png,image/gif,image/jpeg,image/bmp" mutiple="mutiple" >

js内容

      handleFileChange:function (e) {
        let inputDOM = this.$refs.inputer;
        // 通过DOM取文件数据
        this.file    = inputDOM.files[0];
        this.errText = '';
        let size = Math.floor(this.file.size / 1024);
        if (size > 4096) {
          // 这里可以加个文件大小控制
          alert('您上传的图片大了')
          return false
        }
        // 触发这个组件对象的input事件
        this.$emit('input', this.file);

        // 这里就可以获取到文件的名字了
        this.fileName = this.file.name;

        // 这里加个回调也是可以的
        this.onChange && this.onChange(this.file, inputDOM.value);

        // 在获取到文件对象进行预览就行了!
        this.imgPreview(this.file);
      }
      imgPreview :function(file) {
        let self = this;
        // 看支持不支持FileReader
        if (!file || !window.FileReader) return;

        if (/^image/.test(file.type)) {
          // 创建一个reader
          var reader = new FileReader();
          // 将图片将转成 base64 格式
          reader.readAsDataURL(file);
          // 读取成功后的回调
          reader.onloadend = function () {
            self.userLogo=this.result;
            self.upPhoto(self.userLogo);
          }
        }
      }
      upPhoto:function(loading){
        var self=this;
//        self.uploadingLayer=true
        self.$http.post(
          '/tools/submit_ajax.ashx?action=user_avatar',
          {'Filedata':loading,'uptype':'1'},
          {emulateJSON: true}
        ).then(function(data){
          var obj=data.data;
          console.log(data)
          if(obj.status==1){

//        self.uploadingLayer=false

          }
        },function(error){
        });
      }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容