type=‘file‘图片上传

input type=file的操作技巧
    1.准备一个漂亮的按钮
    2.将 input type=file隐藏起来
    3.响应 漂亮按钮的点击事件
    4.在点击事件中, 模拟 input type=file被点击
    5.监听 input type=file 的change事件

如何获取用户选择的那张图片
    1.监听 input type=file 的change事件
    2.在change事件中, 通过 input type=file 这个元素对象的 files属性
    3.   var myfile = document.querySelector('#myfile')
         myfile.files[0]
    
如何使用这张图片
    将图片对象, 生成一个它在内存中的地址, 然后把地址赋值给img标签的src属性
        var path = URL.createObjectURL(myfile.files[0])
        document.querySelector('img').src = path
    
    
如何图片进行上传
    1.  multipart/form-data
        var fd = new FormData()
        fd.append('avatar', myfile.files[0])
        $.ajax({
            data: fd
        })
    2. 把裁切的图片变成Base64格式的字符串
        再把字符串传递给服务器(就像传递用户名和密码)

 例：

<input id="avatar" ref="avatar" type="file" style="display: none;" name="avatar" accept=".gif,.jpg,.png,.svg,.bmp">
         <img v-if="ruleForm.avatar" :src="ruleForm.avatar" style="width: 100px;height: 100px;" @click="upImg">
        <div v-else style="width:100px;height:100px;border:1px solid LightGray" @click="clickUpImg">
          <i class="el-icon-plus" style="width:100px;height:100px;line-height: 100px;text-align: center;" />
        </div>

// 新上传图片
    upImg() {
      this.$refs.avatar.value = ''// 清除标签内容,防止上传多次
      // this.ruleForm.avatar = ''
      this.clickUpImg()
    },

 clickUpImg() {
      const avatar = this.$refs.avatar
      avatar.click()
      avatar.onchange = async (file) => {
        // console.log(file.target.files[0])
        var files = file.target.files[0]// 只上传单张图片
        if (!files) {
          return
        }
        if (files.type !== 'image/jpeg' || files.type !== 'image/png' || files.type !== 'image/jpg' || files.type !== 'image/gif' || files.type !== 'image/svg' || files.type !== 'image/bmp') {
 console.log('格式正确');
}else{
          this.$message.error('文件格式错误！')
          return
        }
        const imgMax = files.size / 1024 / 1024 < 50
        if (!imgMax) {
          this.$message.error('上传文件大小不能超过 50MB!')
          return
        }
        var formData = new FormData()
        console.log(file.target.files[0])
        formData.append('image', file.target.files[0])
        formData.append('type', 1)
        console.log(formData.get('image'))
        const res = await uploadImg(formData)
        this.ruleForm[file.target.id] = res.data.path
        console.log(res)
      }
    },

css

.content {
    font-size: 12px;
    height: 150px;
    width: 200px;
}

.content ::after {
    content: '';
    display: block;
    clear: both;
    overflow: hidden;
}

.drag-area {
    // position: relative;
    cursor: pointer;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: dashed 1px gray;
    margin-bottom: 10px;
    color: #777;
    display: flex;
    justify-content: center;
    align-items: center;
}


.file-name {
    text-align: center;
    cursor: pointer;
    width: 100%;
    height: 100%;
}