Analisis ringkas tentang cara vue melaksanakan muat naik menghiris fail

Dalam proses projek pembangunan sebenar, kadangkala perlu memuat naik fail yang agak besar Kemudian, muat naik akan menjadi agak perlahan, jadi latar belakang mungkin memerlukan bahagian hadapan untuk diproses muat naik Slice adalah sangat mudah untuk memotong aliran fail, contohnya, 1 G kepada beberapa aliran fail kecil, dan kemudian meminta antara muka untuk menghantar aliran fail kecil ini.

Penerangan ringkas tentang proses

Untuk melaksanakan import penghirisan fail, mula-mula kami menggunakan elementUI atau teg muat naik asli untuk mendapatkan aliran fail fail, dan kemudian kami perlu lakukan Satu perkara ialah untuk mengetahui sama ada fail ini telah dimuat naik sebelum ini kembalikan kami tiga status :

• Tiada fail, anda perlu memuat naik kesemuanya.

• Fail ini wujud dan bahagian hadapan tidak perlu memuat naiknya semula.

• Sebahagian daripada fail ini telah dimuat naik dan anda perlu terus memuat naik bahagian yang belum dimuat naik.

Hanya terdapat tiga keadaan ini Satu parameter penting untuk melaksanakan langkah ini ialah pengecam unik bagi fail ini. Jadi kita perlu mendapatkan kod pengenalan unik MD5 bagi fail ini terlebih dahulu. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Apabila kami mengetahui bahawa fail perlu dimuat naik atau perlu dimuat naik sebahagiannya, kami perlu melakukan operasi menghiris . Ini adalah sangat mudah. ​​Contohnya, aliran bait perduaan fail adalah 1G secara keseluruhan, dan kemudian ia biasanya dipotong menjadi satu keping 5M, jadi jika ia adalah fail 1G, ia perlu dipotong kepada 205 keping sudah tentu, bahagian terakhir tidak semestinya 5M, dan kemudian kita pergi Antara muka untuk memuat naik fail dalam bahagian, memulakan permintaan untuk mengimport fail ke bahagian.

Pertama sekali, mari jelaskan bahawa selepas kami menyerahkan 205 aliran data berpecah-belah ini, latar belakang perlu digabungkan, iaitu, 205 aliran fail yang dihantar oleh serpihan kami disintesis menjadi satu fail besar dan disimpan . Dengan cara ini, fail yang digabungkan di latar belakang adalah fail yang akhirnya akan kami serahkan untuk diimport Memandangkan bahagian belakang perlu digabungkan, kami memuat naiknya sekeping demi sekeping adalah, betul? Oleh itu, apabila kami menyerahkan permintaan sharding, biasanya kami perlu lulus parameter ini:

• chunk: Nombor shard semasa, biasanya bermula dari 0.
• Saiz ketul: Saiz serpihan, biasanya 5M, iaitu 5242880 bait.
• ketul: Berapakah jumlah keseluruhannya.
• fail: Strim fail serpihan semasa.
• md5: Kod pengenalan unik MD5 bagi keseluruhan fail, tidak berpecah-belah.
• nama: Nama fail semasa.
• saiz: Saiz serpihan semasa (jika blok terakhir tidak semestinya 5M).

Dengan cara ini bahagian belakang tahu cara menggabungkan fail akhir. Sudah tentu, medan khusus perlu ditakrifkan oleh bahagian belakang, dan kemudian kita boleh menyambung dengan sewajarnya mengikut idea ini.

OK, selepas semua 205 data serpihan kami diserahkan, kami perlu melalui antara muka lain, iaitu untuk memberitahu bahagian belakang Okay, serpihan bahagian hadapan saya telah dihantar, dan anda boleh menggabungkan fail.

Kemudian cantuman bahagian belakang selesai dan fail berjaya diimport!

Dapatkan kod pengenalan unik MD5 bagi fail

Ramai orang mengatakan bahawa MD5 bukan penyulitan Sebenarnya, idea ini tidak betul di sini fail. Ya, ia hanya akan menghasilkan kod unik Jadi, oh, anggap saja ia sebagai penyulitan, tetapi jangan fikir bahawa menghantar kod MD5 sama seperti menghantar fail yang disulitkan ke bahagian belakang rentetan, bukan Fail yang disulitkan, kedua, perkara ini tidak boleh menyahsulit. Kami hanya menjana pengecam unik untuk fail di sini, supaya bahagian belakang boleh menentukan sama ada fail itu telah wujud pada pelayan sebelum ini Jika terdapat pengecam unik, ini bermakna ia telah dimuat naik sebelum ini memuat naik sekali lagi, selepas semua, jika fail itu diubah suai, kod pengenalan MD5 akan berubah.

Cara mendapatkan pengekodan MD5 bagi fail adalah sangat mudah Anda perlu menggunakan pustaka spark-md5 dalam vue.

Satu arahan untuk memasang

npm install --save spark-md5

Kemudian kita boleh menulis kaedah untuk merangkumnya.

Buat failMd5Sum.js:

import SparkMD5 from 'spark-md5'

export default {
  // md5值计算
  fileMd5Sum(file) {
    return new Promise(resolve => {
      let fileReader = new FileReader()
      let Spark = new SparkMD5.ArrayBuffer()
      fileReader.readAsArrayBuffer(file)
      fileReader.onload = function (e) {
        Spark.append(e.target.result)
        let md5 = Spark.end()
        resolve(md5)
      }
    });
  }
}

Kemudian anda boleh menggunakannya apabila anda perlu menggunakannya Sudah tentu, apa yang dikembalikan di sini adalah Janji, yang boleh diperolehi terus .then.

atau gunakan async、 await .

let md5Str = await this.fileMd5Sum.fileMd5Sum(file.raw)

文件切片

获取了文件MD5标识码，后台说需要提交，我们就需要把文件切片，从头提交或者是提交部分操作了，如果不需要的话直接走合并接口就可以了，走合并接口其实是告诉后台合并，我们要做的就是把其他除了文件相关的其他参数传递给后台罢了。

文件切片就是类似于字符串截取，这里是截取字节。获取需要的参数我们自己些就可以了。假设我们使用 elementUI 文件上传组件获取到了文件 file。

获取文件名 name

let fileName = file.name  // 获取文件名

分片文件大小 chunkSize

let chunkSize = 5 * 1024 * 1024   // 一般是 5M，具体多少看后端想要多少

文件切片 chunkList 列表

            let chunkList = []  // 创建一个数组用来存储每一片文件流数据
            if (file.size < chunkSize) {  // 如果文件大小小于5M就只有一片，不用切都
              chunkList.push(file.raw.slice(0))  // 文件流从第一个字节直接截取到最后就可以了
            } else {  // 如果文件大小大于5M 就需要切片了
              var start = 0, end = 0  // 创建两个变量 开始位置 结束位置
              while (true) {  // 循环
                end += chunkSize  // 结束为止 = 结束位置 + 每片大小
                let blob = file.raw.slice(start, end)  // 文件流从开始位置截取到结束位置
                start += chunkSize  // 截取完，开始位置后移
                if (!blob.size) {  // 如果截取不到了就退出
                  break;
                }
                chunkList.push(blob)  // 把截取的每一片数据保存到数组
              }
            }

切片总数 chunks

我们上一步已经获取到每片文件流的数组了，所以说呢，直接获取就可以了。

let chunks = chunkList.length

切片大小  size

我们是按照 5 M 切割的，所以说每片大小应该是 5 * 1024 * 1024   但是呢，不对，因为最后一片不一定就是正好的 5 M，所以说我们可直接 .size 获取一下大小。比如：

chunkList[0].size  // 获取第1片大小

参数都找齐了，然后就走切片提交接口开始提交数据就可以了。

合并

当我们把分片数据全部提交成功，后台返回说切片文件保存成功之后，我们就可以走最后一个接口，提交就可以了。

好了，就这样！完成！！！

（学习视频分享：vuejs入门教程、编程基础视频）

Atas ialah kandungan terperinci Analisis ringkas tentang cara vue melaksanakan muat naik menghiris fail. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!