input实现图片或视频上传（样式+代码）-白红宇

input实现图片或视频上传（样式+代码）

阅读量：5280 次

发布时间：2019-06-14

本文共 3224 字，大约阅读时间需要 10 分钟。

背景：vue/element.ui

1..html：


       
          
             
                                                        
       
                                                      
     
      
     
      单个图片上传大小限制：10M
     
      图片数限制：1张至6张

注意

input标签的accept属性，设置上传图片的格式

input标签的multiple="multiple"，设置可否多选

2.css：

.img-list {
    padding: 0;   overflow: hidden;   li {
      position: relative;     list-style: none;     float: left;     margin: 10px;     .del-btn {
        position: absolute;       top: 0;       right: 0;       color: transparent;     }     img {
        border-radius: 3px;     }     &:hover .del-btn {
        color: #000;     }   } } .little-tip {
    color: #c7c9d1; } .upload-video {
    position: relative;   display: inline-block;   border: 1px solid #cacdd4;   padding: 0 15px;   border-radius: 3px;   background-color: #3f9dff;   color: #fff;   .videofile {
      position: absolute;     width: 100%;     height: 100%;     right: 0;     top: 0;     opacity: 0;   } } 3.upload.js

function upload(config) {
    this.config = config; }

upload.prototype.ajaxUp = function (fileId, callback) {
    for (var i = 0; i < $('#' + fileId)[0].files.length; i++) {
      var formData = new FormData();     formData.append('file_list', $('#' + fileId)[0].files[i].name);     ajax({
        url: '验签url，如果不需要省略该ajax',       type: 'POST',       data: formData,       async: false,       dataType: 'json',       index: i,       success: function (data, cur_i) {
          if (0 === data.code) {
            var signs = data.data.signs;           var policy = signs.Policy;           var kss = signs.KSSAccessKeyId;           var key = signs.key;           var acl = signs.acl;           var signature = signs.Signature;           var name = signs.file_name;           var formDataUp = new FormData();           formDataUp.append('KSSAccessKeyId', kss);           formDataUp.append('acl', acl);           formDataUp.append('key', key);           formDataUp.append('Policy', policy);           formDataUp.append('Signature', signature);           formDataUp.append('file', $('#' + fileId)[0].files[cur_i]);           var fileObj = $('#' + fileId)[0].files[cur_i];           ajax({
              url: '上传服务器url',             type: 'POST',             data: formDataUp,             async: false,             success: function () {
                callback(key, name, fileObj);               window.console.log('upload class success');             },             error: function () {
                window.console.log('与提交服务器通信发生错误');             }           });         }       },       error: function () {
          window.console.log('与获取服务器通信发生错误');       }     });   } }; 4.js的使用

import Uploader from '@/libs/upload'

let uploader = new Uploader() uploader.ajaxUp(containerId, (key, name, fileObj) => {
    let host = '上传服务器url'   let url = host + key   _this.process = '上传完成'   _this.isDelAction = false   obj.resourceUrl = url   _this.recordForm.item.push(obj) })

注意：

@change事件，上传时，如果连续上传同一张图片，则第二次不会再触发change事件

解决方法：同时给该input绑定click事件，清除该事件源e.target的value值，即e.target.value=''

原理：