如何批量上传图片？一份详细教程指南

一、使用ih5自身数据库获取链接

1、尝试3（加数组过渡，提交多条数据）

步骤1：在舞台上添加一个容器来放置拖入的图片。

步骤2：在舞台初始化时添加循环事件，选对象范围为放图片的容器，类型为图片，动作为数组填充行，行数为计数器的值，值为图片的URL。

步骤3：预览查看，确保正确读取到图片数量（即循环次数）。

步骤4：打开数据库查看，发现只成功提交了一张图片，此时需要添加一个按钮和计数器，并设置数组行数为100。

步骤5：按钮添加事件，点击输出数组的行数到计数器（理论结果计数器的值应该为100）。

步骤6：预览点击测试，发现实际的输出值居然为0，先在数组里导入一些数据，再预览点击，显示的值为导入的行，而非设置的100，然后点击数组里的清空数据，再次预览点击，发现正常了（行数依旧设置为100）。

步骤7：一切正常后，回到数据库查看，图片已经批量上传成功，且顺序也相对正常，然后将这些图片链接的数据导出到Excel，再用公式把链接加个前缀即可（已有前缀的无需添加）。

二、使用jQuery-File-Upload插件

1、引入必要的CSS和JS文件

   <link rel="stylesheet" href="{{asset('js/jquery-fileupload/css/jquery.fileupload.css')}}">
   <link rel="stylesheet" href="{{asset('js/jquery-fileupload/css/jquery.fileupload-ui.css')}}">
   <script type="text/javascript" src="{{asset('js/jquery-fileupload/js/jquery.ui.widget.js')}}"></script>
   <script type="text/javascript" src="{{asset('js/jquery-fileupload/js/jquery.fileupload.js')}}"></script>
   <script type="text/javascript" src="{{asset('js/jquery-fileupload/js/jquery.iframe-transport.js')}}"></script>

2、HTML代码

   <meta name="csrf-token" content="{{ csrf_token() }}">  
   <form id="submit_form" action="{{route('work.store')}}" method="post">
       {{csrf_field()}}
       <table class="add_tab">
           <tbody>
               <tr>
                   <th>图片：<a id="start"></a></th>
                   <td>
                       <input id="fileupload" type="file" name="files[]" data-url="{{route('batch-upload', ['works'])}}" multiple>
                       <input id="file_path" type="hidden" name="file_path">
                   </td>
               </tr>
               <tr>
                   <th></th>
                   <td>
                       <div>
                           <div id="progress" style="width:50%;float:left">
                               <div class="bar" style="width: 0%;height:18px;background:green;"></div>
                           </div>
                           <div id="upload_finish" style="display:none;float:left;margin-left:15px;height:18px;line-height:18px;">上传完成</div>
                       </div>
                       <div style="clear:both"></div>
                       <div id = "upload_list">
                       </div>
                   </td>
               </tr>
               <tr>
                   <th></th>
                   <td>
                       <input type="submit" value="提交">
                       <input type="button" class="back" onclick="history.go(-1)" value="返回">
                   </td>
               </tr>
           </tbody>
       </table>
   </form>

3、实现的JS代码

   $(function () {
       $('#fileupload').fileupload({
           dataType: 'json',
           singleFileUploads: false,
           beforeSend: function(xhr) {
               $('#upload_finish').hide();
               $('#progress .bar').css(
                   'width',
                   '0%'
               );
               xhr.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content'));
           },
           progressall: function (e, data) {
               var progress = parseInt(data.loaded / data.total * 100, 10);
               $('#progress .bar').css(
                   'width',
                   progre
           });
   }

三、使用Element UI + Vue进行批量上传

1、HTML部分

   <el-dialog title="选择上传图片" :visible.sync="dialogVisible_up_image" width="30%">       
       <el-upload          ref="upload"          class="upload-demo"          action=""          :multiple="true"          :auto-upload="false"          :before-upload="beforeAvatarUploadImage"          :file-list="fileList"          :limit="6"          :on-change="handleChange">          <el-button slot="trigger" size="small" type="primary">选取图片</el-button>          <el-button style="margin-left: 10px;" size="small" type="primary" @click="uploadForm">上传到服务器</el-button>          <div slot="tip" class="el-upload__tip">只能上传png、jpg格式的图片</div>       </el-upload>  
       <span slot="footer" class="dialog-footer">      <el-button @click="dialogVisible_up_image = false">取 消</el-button>      <el-button type="primary" @click="dialogVisible_up_image = false">确 定</el-button>    </span>    </el-dialog>

2、JS部分

   // 判断图片格式    beforeAvatarUploadImage(file) {      const isJpeg = file.type === 'image/png' || file.type === 'image/jpg'      if (!isJpeg) {        this.$message.error('请选择正确的文件格式上传')      }      return isJpeg    },    // 选择文件时，往fileList里添加    handleChange(fileList) {      this.fileList.push(fileList)    },    // 批量上传    uploadForm() {      if (this.fileList.length === 0) {        this.$message.warning('请选取文件')        return      }      const formData = new FormData()      // 因为要传一个文件数组过去，所以要循环append      this.fileList.forEach(file => {        formData.append('files', file.raw)      })      formData.append('userId', this.userId) // 自定义参数      this.$axios.post('http://117.78.49.148:8088/medical-care/common/uploadFile/FullPaths', formData).then(res => {        this.$message.success('图片上传成功！')        setTimeout(() => {          this.dialogVisible_up_image = false        }, 500)      }).catch(res => {        thi

是几种常见的批量上传图片的方法及其实现步骤，你可以根据自己的需求选择合适的方法进行操作。

各位小伙伴们，我刚刚为大家分享了有关批量上传图片教程 _上传图片的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！