vue el-upload 文件上传

布满荆棘的人生 2023-01-18 04:00 158阅读 0赞

### el-upload 用到的一些参数 ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>action</td> 
   <td>必选参数，上传的地址</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>headers</td> 
   <td>设置上传的请求头部</td> 
   <td>object</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>multiple</td> 
   <td>是否支持多选文件</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>上传时附带的额外参数</td> 
   <td>object</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>上传的文件字段名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>file</td> 
  </tr> 
  <tr> 
   <td>with-credentials</td> 
   <td>支持发送 cookie 凭证信息</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>show-file-list</td> 
   <td>是否显示已上传文件列表</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>drag</td> 
   <td>是否启用拖拽上传</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>accept</td> 
   <td>接受上传的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept" rel="nofollow">文件类型</a>（thumbnail-mode 模式下此参数无效）</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>on-preview</td> 
   <td>点击文件列表中已上传的文件时的钩子</td> 
   <td>function(file)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>on-remove</td> 
   <td>文件列表移除文件时的钩子</td> 
   <td>function(file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>on-success</td> 
   <td>文件上传成功时的钩子</td> 
   <td>function(response, file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>on-error</td> 
   <td>文件上传失败时的钩子</td> 
   <td>function(err, file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>on-progress</td> 
   <td>文件上传时的钩子</td> 
   <td>function(event, file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>on-change</td> 
   <td>文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用</td> 
   <td>function(file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>before-upload</td> 
   <td>上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。</td> 
   <td>function(file)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>before-remove</td> 
   <td>删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。</td> 
   <td>function(file, fileList)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>list-type</td> 
   <td>文件列表的类型</td> 
   <td>string</td> 
   <td>text/picture/picture-card</td> 
   <td>text</td> 
  </tr> 
  <tr> 
   <td>auto-upload</td> 
   <td>是否在选取文件后立即进行上传</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>file-list</td> 
   <td>上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]</td> 
   <td>array</td> 
   <td>—</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>http-request</td> 
   <td>覆盖默认的上传行为，可以自定义上传的实现</td> 
   <td>function</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>limit</td> 
   <td>最大允许上传个数</td> 
   <td>number</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>on-exceed</td> 
   <td>文件超出个数限制时的钩子</td> 
   <td>function(files, fileList)</td> 
   <td>—</td> 
   <td> <p>-</p> <p>&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

例子
    <template>
      <div class="hello">
        <el-upload action="http://127.0.0.1:8702/Hello/upload"
                   :on-change="upload"
                   :limit="1"
                   :auto-upload="false">
          <div>文件上传</div>
        </el-upload>
      </div>
    
    </template>
    <script type="text/javascript">
      import $ from 'jquery'
    
      export default ({
        data () {
          return {
            mgs: ''
          }
        },
        methods: {
          getTest1 () {
            console.info('1212')
            this.$emit('refresh')
          },
          upload (file) {
            debugger
            console.info(file)
            let form = new FormData()
            form.append('file', file.raw)
            let reader = new FileReader()
            reader.onload = function () {
              $.ajax({
                url: 'http://127.0.0.1:8702/Hello/upload',
                type: 'post',
                data: form,
                processData: false, // 很重要，告诉jquery不要对form进行处理
                contentType: false, // 很重要，指定为false才能形成正确的Content-Type
                success: function () {
                  console.info('上传成功')
                }
              })
            }
            reader.readAsBinaryString(file.raw)
          }
        }
      })
    
    </script>