wangwei
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: c8f1fa957e
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'c8f1fa957e'
${ noResults }
aiforge/web_src/js/components/MinioUploader.vue

479 lines
16 kB
Raw Blame History 

  1. <template>

  2.   <div class="dropzone-wrapper dataset-files">

  3.     <div

  4.       id="dataset"

  5.       class="dropzone"

  6.     />

  7.     <p class="upload-info">

  8.       {{ file_status_text }}

  9.       <span class="success">{{ status }}</span>

  10.     </p>

  11.   </div>

  12. </template>

  13. 

  14. <script>

  15. /* eslint-disable eqeqeq */

  16. // import Dropzone from 'dropzone/dist/dropzone.js';

  17. // import 'dropzone/dist/dropzone.css'

  18. import SparkMD5 from 'spark-md5';

  19. import axios from 'axios';

  20. import qs from 'qs';

  21. import createDropzone from '../features/dropzone.js';

  22. 

  23. const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;

  24. const cloud_brain_type = 1;

  25. 

  26. export default {

  27.   data() {

  28.     return {

  29.       dropzoneUploader: null,

  30.       maxFiles: 1,

  31.       maxFilesize: 1 * 1024 * 1024 * 1024 * 1024,

  32.       acceptedFiles: '*/*',

  33.       progress: 0,

  34.       status: '',

  35.       dropzoneParams: {},

  36.       file_status_text: ''

  37.     };

  38.   },

  39. 

  40.   async mounted() {

  41.     this.dropzoneParams = $('div#minioUploader-params');

  42.     this.file_status_text = this.dropzoneParams.data('file-status');

  43.     this.status = this.dropzoneParams.data('file-init-status');

  44. 

  45.     let previewTemplate = '';

  46.     previewTemplate += '<div class="dz-preview dz-file-preview">\n ';

  47.     previewTemplate += '    <div class="dz-details">\n ';

  48.     previewTemplate += '        <div class="dz-filename">';

  49.     previewTemplate +=

  50.       '            <span data-dz-name data-dz-thumbnail></span>';

  51.     previewTemplate += '        </div>\n    ';

  52.     previewTemplate += '        <div class="dz-size" data-dz-size></div>\n  ';

  53.     previewTemplate += '    </div>\n  ';

  54.     previewTemplate += '    <div class="dz-progress ui active progress">';

  55.     previewTemplate +=

  56.       '        <div class="dz-upload bar" data-dz-uploadprogress><div class="progress"></div></div>\n  ';

  57.     previewTemplate += '    </div>\n  ';

  58.     previewTemplate += '    <div class="dz-success-mark">';

  59.     previewTemplate += '        <span>上传成功</span>';

  60.     previewTemplate += '    </div>\n  ';

  61.     previewTemplate += '    <div class="dz-error-mark">';

  62.     previewTemplate += '        <span>上传失败</span>';

  63.     previewTemplate += '    </div>\n  ';

  64.     previewTemplate += '    <div class="dz-error-message">';

  65.     previewTemplate += '        <span data-dz-errormessage></span>';

  66.     previewTemplate += '    </div>\n';

  67.     previewTemplate += '</div>';

  68. 

  69.     const $dropzone = $('div#dataset');

  70.     console.log('createDropzone');

  71.     const dropzoneUploader = await createDropzone($dropzone[0], {

  72.       url: '/todouploader',

  73.       maxFiles: this.maxFiles,

  74.       maxFilesize: this.maxFileSize,

  75.       timeout: 0,

  76.       autoQueue: false,

  77.       dictDefaultMessage: this.dropzoneParams.data('default-message'),

  78.       dictInvalidFileType: this.dropzoneParams.data('invalid-input-type'),

  79.       dictFileTooBig: this.dropzoneParams.data('file-too-big'),

  80.       dictRemoveFile: this.dropzoneParams.data('remove-file'),

  81.       previewTemplate

  82.     });

  83.     dropzoneUploader.on('addedfile', (file) => {

  84.       setTimeout(() => {

  85.         // eslint-disable-next-line no-unused-expressions

  86.         file.accepted && this.onFileAdded(file);

  87.       }, 200);

  88.     });

  89.     dropzoneUploader.on('maxfilesexceeded', function (file) {

  90.       if (this.files[0].status !== 'success') {

  91.         alert(this.dropzoneParams.data('waitting-uploading'));

  92.         this.removeFile(file);

  93.         return;

  94.       }

  95.       this.removeAllFiles();

  96.       this.addFile(file);

  97.     });

  98. 

  99.     this.dropzoneUploader = dropzoneUploader;

  100.   },

  101.   methods: {

  102.     resetStatus() {

  103.       this.progress = 0;

  104.       this.status = '';

  105.     },

  106.     updateProgress(file, progress) {

  107.       file.previewTemplate.querySelector(

  108.         '.dz-upload'

  109.       ).style.width = `${progress}%`;

  110.     },

  111.     emitDropzoneSuccess(file) {

  112.       file.status = 'success';

  113.       this.dropzoneUploader.emit('success', file);

  114.       this.dropzoneUploader.emit('complete', file);

  115.     },

  116.     emitDropzoneFailed(file) {

  117.       this.status = this.dropzoneParams.data('falied');

  118.       file.status = 'error';

  119.       this.dropzoneUploader.emit('error', file);

  120.       // this.dropzoneUploader.emit('complete', file);

  121.     },

  122.     onFileAdded(file) {

  123.       file.datasetId = document

  124.         .getElementById('datasetId')

  125.         .getAttribute('datasetId');

  126.       this.resetStatus();

  127.       this.computeMD5(file);

  128.     },

  129. 

  130.     finishUpload(file) {

  131.       this.emitDropzoneSuccess(file);

  132.       // setTimeout(() => {

  133.       //   window.location.reload();

  134.       // }, 1000);

  135.     },

  136. 

  137. //     computeMD5(file) {

  138. //       this.resetStatus();

  139. //       const blobSlice =

  140. //           File.prototype.slice ||

  141. //           File.prototype.mozSlice ||

  142. //           File.prototype.webkitSlice,

  143. //         chunkSize = 1024 * 1024 * 64,

  144. //         chunks = Math.ceil(file.size / chunkSize),

  145. //         spark = new SparkMD5.ArrayBuffer(),

  146. //         fileReader = new FileReader();

  147. //       let currentChunk = 0;

  148. 

  149. //       const time = new Date().getTime();

  150. //       // console.log('计算MD5...')

  151. //       this.status = this.dropzoneParams.data('md5-computing');

  152. //       file.totalChunkCounts = chunks;

  153. //       loadNext();

  154. 

  155. //       fileReader.onload = (e) => {

  156. //         fileLoaded.call(this, e);

  157. //       };

  158. //       fileReader.onerror = (err) => {

  159. //         console.warn('oops, something went wrong.', err);

  160. //         file.cancel();

  161. //       };

  162. 

  163. //       function fileLoaded(e) {

  164. //         spark.append(e.target.result); // Append array buffer

  165. //         currentChunk++;

  166. //         if (currentChunk < chunks) {

  167. //           // console.log(`第${currentChunk}分片解析完成, 开始第${currentChunk +1}/${chunks}分片解析`);

  168. //           this.status = `${this.dropzoneParams.data('loading-file')} ${(

  169. //             (currentChunk / chunks) *

  170. //             100

  171. //           ).toFixed(2)}% (${currentChunk}/${chunks})`;

  172. //           this.updateProgress(file, ((currentChunk / chunks) * 100).toFixed(2));

  173. //           loadNext();

  174. //           return;

  175. //         }

  176. 

  177. //         const md5 = spark.end();

  178. //         console.log(

  179. //           `MD5计算完成：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${

  180. //             file.size

  181. //           } 用时：${(new Date().getTime() - time) / 1000} s`

  182. //         );

  183. //         spark.destroy(); // 释放缓存

  184. //         file.uniqueIdentifier = md5; // 将文件md5赋值给文件唯一标识

  185. //         file.cmd5 = false; // 取消计算md5状态

  186. //         this.computeMD5Success(file);

  187. //       }

  188. 

  189. //       function loadNext() {

  190. //         const start = currentChunk * chunkSize;

  191. //         const end =

  192. //           start + chunkSize >= file.size ? file.size : start + chunkSize;

  193. //         fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));

  194. //       }

  195. //     },

  196. 

  197. //     async computeMD5Success(md5edFile) {

  198. //       const file = await this.getSuccessChunks(md5edFile);

  199. //       try {

  200. //         if (file.uploadID == '' || file.uuid == '') {

  201. //         // 未上传过

  202. //           await this.newMultiUpload(file);

  203. //           if (file.uploadID != '' && file.uuid != '') {

  204. //             file.chunks = '';

  205. //             this.multipartUpload(file);

  206. //           } else {

  207. //           // 失败如何处理

  208. //             return;

  209. //           }

  210. //           return;

  211. //         }

  212. 

  213. //         if (file.uploaded == '1') {

  214. //         // 已上传成功

  215. //         // 秒传

  216. //           if (file.attachID == '0') {

  217. //           // 删除数据集记录，未删除文件

  218. //             await addAttachment(file);

  219. //           }

  220. //           //不同数据集上传同一个文件

  221. //           if (file.datasetID != '') {

  222. //             if (Number(file.datasetID) != file.datasetId) {

  223. //               var info = "该文件已上传，对应数据集（" + file.datasetName + "）-文件（" + file.realName + ")";

  224. //               window.alert(info);

  225. //               window.location.reload();

  226. //             }

  227. //           }

  228. //           console.log('文件已上传完成');

  229. //           this.progress = 100;

  230. //           this.status = this.dropzoneParams.data('upload-complete');

  231. //           this.finishUpload(file);

  232. //         } else {

  233. //         // 断点续传

  234. //           this.multipartUpload(file);

  235. //         }

  236. //       } catch (error) {

  237. //         this.emitDropzoneFailed(file);

  238. //         console.log(error);

  239. //       }

  240. 

  241. //       async function addAttachment(file) {

  242. //         return await axios.post(

  243. //           '/attachments/add',

  244. //           qs.stringify({

  245. //             uuid: file.uuid,

  246. //             file_name: file.name,

  247. //             size: file.size,

  248. //             dataset_id: file.datasetId,

  249. //             _csrf: csrf

  250. //           })

  251. //         );

  252. //       }

  253. //     },

  254. 

  255. //     async getSuccessChunks(file) {

  256. //       const params = {

  257. //         params: {

  258. //           md5: file.uniqueIdentifier,

  259. //           type: cloud_brain_type,

  260. //           _csrf: csrf

  261. //         }

  262. //       };

  263. //       try {

  264. //         const response = await axios.get('/attachments/get_chunks', params);

  265. //         file.uploadID = response.data.uploadID;

  266. //         file.uuid = response.data.uuid;

  267. //         file.uploaded = response.data.uploaded;

  268. //         file.chunks = response.data.chunks;

  269. //         file.attachID = response.data.attachID;

  270. //         file.datasetID = response.data.datasetID;

  271. //         file.datasetName = response.data.datasetName;

  272. //         file.realName = response.data.fileName;

  273. //         return file;

  274. //       } catch (error) {

  275. //         this.emitDropzoneFailed(file);

  276. //         console.log('getSuccessChunks catch: ', error);

  277. //         return null;

  278. //       }

  279. //     },

  280. 

  281. //     async newMultiUpload(file) {

  282. //       const res = await axios.get('/attachments/new_multipart', {

  283. //         params: {

  284. //           totalChunkCounts: file.totalChunkCounts,

  285. //           md5: file.uniqueIdentifier,

  286. //           size: file.size,

  287. //           fileType: file.type,

  288. //           type: cloud_brain_type,

  289. //           _csrf: csrf

  290. //         }

  291. //       });

  292. //       console.log("dsnjs", res)

  293. //       file.uploadID = res.data.uploadID;

  294. //       file.uuid = res.data.uuid;

  295. //     },

  296. 

  297. //     multipartUpload(file) {

  298. //       const blobSlice =

  299. //           File.prototype.slice ||

  300. //           File.prototype.mozSlice ||

  301. //           File.prototype.webkitSlice,

  302. //         chunkSize = 1024 * 1024 * 64,

  303. //         chunks = Math.ceil(file.size / chunkSize),

  304. //         fileReader = new FileReader(),

  305. //         time = new Date().getTime();

  306. //       let currentChunk = 0;

  307. 

  308. //       function loadNext() {

  309. //         const start = currentChunk * chunkSize;

  310. //         const end =

  311. //           start + chunkSize >= file.size ? file.size : start + chunkSize;

  312. //         fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));

  313. //       }

  314. 

  315. //       function checkSuccessChunks() {

  316. //         const index = successChunks.indexOf((currentChunk + 1).toString());

  317. //         if (index == -1) {

  318. //           return false;

  319. //         }

  320. //         return true;

  321. //       }

  322. 

  323. //       // async function getUploadChunkUrl(currentChunk, partSize) {

  324. //       //   const res = await axios.get('/attachments/get_multipart_url', {

  325. //       //     params: {

  326. //       //       uuid: file.uuid,

  327. //       //       uploadID: file.uploadID,

  328. //       //       size: partSize,

  329. //       //       chunkNumber: currentChunk + 1,

  330. //       //       type: cloud_brain_type,

  331. //       //       _csrf: csrf

  332. //       //     }

  333. //       //   });

  334. //       //   urls[currentChunk] = res.data.url;

  335. //       // }

  336. 

  337. //       // async function uploadMinio(url, e) {

  338. //       //   const res = await axios.put(url, e.target.result);

  339. //       //   etags[currentChunk] = res.headers.etag;

  340. //       // }

  341. 

  342. //       // async function updateChunk(currentChunk) {

  343. //       //   await axios.post(

  344. //       //     '/attachments/update_chunk',

  345. //       //     qs.stringify({

  346. //       //       uuid: file.uuid,

  347. //       //       chunkNumber: currentChunk + 1,

  348. //       //       etag: etags[currentChunk],

  349. //       //       _csrf: csrf

  350. //       //     })

  351. //       //   );

  352. //       // }

  353. 

  354. //       async function uploadPart(currentChunk, partSize, e) {

  355. //         console.log(e);

  356. //         let params = new FormData();

  357. //         params.append("uuid", file.uuid);

  358. //         params.append("uploadId", file.uploadID);

  359. //         params.append("size", partSize);

  360. //         params.append("chunkNumber", currentChunk + 1);

  361. //         params.append("file", e.target.file);

  362. //         params.append("_csrf", csrf);

  363. //         return await axios.post('/attachments/upload_part',

  364. //               params,

  365. //               {headers: {'Content-Type': 'multipart/form-data'}}

  366. //             );

  367. //       }

  368. 

  369. //       async function uploadChunk(e) {

  370. //         try {

  371. //           if (!checkSuccessChunks()) {

  372. //             const start = currentChunk * chunkSize;

  373. //             const partSize =

  374. //             start + chunkSize >= file.size ? file.size - start : chunkSize;

  375. //             await uploadPart(currentChunk, partSize, e);

  376. 

  377. //             // 获取分片上传url

  378. //             // await getUploadChunkUrl(currentChunk, partSize);

  379. //             // if (urls[currentChunk] != '') {

  380. //             // // 上传到minio

  381. //             //   await uploadMinio(urls[currentChunk], e);

  382. //             //   if (etags[currentChunk] != '') {

  383. //             //   // 更新数据库：分片上传结果

  384. //             //     //await updateChunk(currentChunk);

  385. //             //   } else {

  386. //             //     console.log("上传到minio uploadChunk etags[currentChunk] == ''");// TODO

  387. //             //   }

  388. //             // } else {

  389. //             //   console.log("uploadChunk urls[currentChunk] != ''");// TODO

  390. //             // }

  391. 

  392. //           }

  393. //         } catch (error) {

  394. //           console.log(error);

  395. //           this.emitDropzoneFailed(file);

  396. //         }

  397. //       }

  398. 

  399. //       async function completeUpload() {

  400. //         return await axios.post(

  401. //           '/attachments/complete_multipart',

  402. //           qs.stringify({

  403. //             uuid: file.uuid,

  404. //             uploadID: file.uploadID,

  405. //             file_name: file.name,

  406. //             size: file.size,

  407. //             dataset_id: file.datasetId,

  408. //             type: cloud_brain_type,

  409. //             _csrf: csrf

  410. //           })

  411. //         );

  412. //       }

  413. 

  414. //       const successChunks = [];

  415. //       let successParts = [];

  416. //       successParts = file.chunks.split(',');

  417. //       for (let i = 0; i < successParts.length; i++) {

  418. //         successChunks[i] = successParts[i].split('-')[0];

  419. //       }

  420. //       const urls = []; // TODO const ?

  421. //       const etags = [];

  422. //       console.log('上传分片...');

  423. //       this.status = this.dropzoneParams.data('uploading');

  424. //       loadNext();

  425. //       fileReader.onload = async (e) => {

  426. //         await uploadChunk(e);

  427. //         fileReader.abort();

  428. //         currentChunk++;

  429. //         if (currentChunk < chunks) {

  430. //           console.log(

  431. //             `第${currentChunk}个分片上传完成, 开始第${currentChunk +

  432. //               1}/${chunks}个分片上传`

  433. //           );

  434. //           this.progress = Math.ceil((currentChunk / chunks) * 100);

  435. //           this.updateProgress(file, ((currentChunk / chunks) * 100).toFixed(2));

  436. //           this.status = `${this.dropzoneParams.data('uploading')} ${(

  437. //             (currentChunk / chunks) *

  438. //             100

  439. //           ).toFixed(2)}%`;

  440. //           await loadNext();

  441. //         } else {

  442. //           await completeUpload();

  443. //           console.log(

  444. //             `文件上传完成：${file.name} \n分片：${chunks} 大小:${

  445. //               file.size

  446. //             } 用时：${(new Date().getTime() - time) / 1000} s`

  447. //           );

  448. //           this.progress = 100;

  449. //           this.status = this.dropzoneParams.data('upload-complete');

  450. //           this.finishUpload(file);

  451. //         }

  452. //       };

  453. //     }

  454. //   }

  455. // };

  456. // </script>

  457. 

  458. <style>

  459. .dropzone-wrapper {

  460.   margin: 2em auto;

  461. }

  462. .ui .dropzone {

  463.   border: 2px dashed #0087f5;

  464.   box-shadow: none !important;

  465.   padding: 0;

  466.   min-height: 5rem;

  467.   border-radius: 4px;

  468. }

  469. .dataset .dataset-files #dataset .dz-preview.dz-file-preview,

  470. .dataset .dataset-files #dataset .dz-preview.dz-processing {

  471.   display: flex;

  472.   align-items: center;

  473. }

  474. .dataset .dataset-files #dataset .dz-preview {

  475.   border-bottom: 1px solid #dadce0;

  476.   min-height: 0;

  477. }

  478. </style>