• vuejs经验交流之-图片上传


    第一步  预览按钮

    <Button style="cursor: pointer;position: absolute;#5d5d5d;left:398px;top:2px;border:0px;"  @click="addSysPic" type="text">预览</Button>
     
    第二步  触发input的file类型
     <input type="file" @change="onSysFileChange" id="fileSysGrade" style="display: none">
     
    第三步  js事件
       
     //预览按钮事件
     addSysPic(e) {
          e.preventDefault()
          //input的file
          $('#fileSysGrade').trigger('click')
          return false
       },
     //input的file事件
       onSysFileChange(e) {
          // 浏览图片
          var files = document.getElementById('fileSysGrade')
          if (files) {
            var file = files.files[0]
              /*global FormData*/
            var formdata = new FormData()
            formdata.append('file', file)
            axios({
              url: '/upload?type=map',
              method: 'post',
              data: formdata,
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res) => {
              console.log('上传成功', res.data.id)
              // 上传成功返回地id
              var id  = res.data.id
            }).catch((err) => {
              console.log('上传失败', err)
            })
          }
        },
  • 相关阅读:
    2020年全国安全生产月活动主题、挂图、招贴、标语、宣教用书等系列产品
    2020年安全生产月主题挂图指定宣教用品目录
    LNMP分离式部署步骤详解
    FTP文件传输服务
    DNS域名解析服务配置与测试
    DHCP服务搭建测试流程
    mysql数据库的操作
    mysql源码编译安装及其配置
    生产环境中ansible的安全处理
    http网页返回码详解
  • 原文地址:https://www.cnblogs.com/zhaoboxing/p/7204140.html
Copyright © 2020-2023  润新知