EDITORIAL
Este artículo está sobre un autor plato de pollo (yo) algunas soluciones de cara a las necesidades de carga de archivos, y si hay problemas o tener que cambiar la forma en que la bienvenida a señalamos.
carga de archivos
Comenzó el proyecto necesita tener un archivo de carga, carga de archivos y luego todos sabemos que tiro directo FormData interior hacia el extremo trasero muy bien
cosnt formData = new FormData(),
formData.append('file', file);
// 发送文件
this.sendFile(formData)
corriente de carga de archivos binarios
Pensé que esto había terminado, pero luego comenzó el FBI cuando se encontró a las necesidades de back-end es un archivo binario. No terminé encontrado esta situación ah, binario? En caso de ser convertida en un archivo binario que, de inmediato fue a ver un poco y aprendió que la entrada de archivos volverá listaDeArchivos objetos cargados cuando se carga de archivos, cada archivo es uno de los objetos de archivo, entonces no es un objeto FileReader se puede leer archivo, y luego tuvo readAsArrayBuffer () puede ser convertido en ArrayBuffer leer el contenido del objeto, y luego leer el archivo FileReader es asíncrona, al leer la parte final del proceso de carga se activa mediante estos se puede obtener el siguiente código
// 新建一个FileReader对象
const reader = new FileReader()
// 调用readAsArrayBuffer方法把File转换成ArrayBuffer
reader.readAsArrayBuffer(file)
// 监听转换完成
reader.onload = function () {
// binary为得到的二进制文件
const binary = this.result
// 发送文件
this.sendBinary(binary)
}
De hecho, hay un pequeño episodio en el proceso, al enviar binario para que el servidor ha sido devuelto a mí el formato incorrecto mal, y entonces intentado todo, sospechan que la conversión de tipo de archivo incorrecto, y finalmente averiguar el error de servidor. ..
la carga de archivos grandes
Que terminó de nuevo, más tarde dijo en su navegador carga de fondo estrellado. Entonces me dio el archivo y lo ha subido encontró
Chrome para cargar un archivo directamente 200M del colapso, y más tarde confirmó la necesidad de apoyar lo que se necesita para cargar archivos de gran tamaño, y abrió una nueva fosa, comenzó a estudiar cómo cargar archivos de gran tamaño en general, y la comunicación de servicios de fondo, que puede proporcionar un back-end interfaz de carga de archivos de división, que se puede dividir el archivo en pequeños fragmentos del tamaño de un 2M subido por separado. A continuación, obtener la parte frontal de la necesidad de hacer la investigación que directamente en el fichero antes de la división por división, a través del ciclo una y otra vez para enviar una petición al inicio de back-end y al final de una solicitud y el número de archivo actual, el backend para dividir archivos de empalme
// 新建一个FileReader对象
const reader = new FileReader()
// 调用readAsArrayBuffer方法把File转换成ArrayBuffer
reader.readAsArrayBuffer(file)
// 监听转换完成
reader.onload = function () {
// binary为得到的二进制文件
const binary = this.result
// 这里定义拆分后的文件为2M一个
const blockSize = 2 * 1024 * 1024
// 如果文件小于2M就直接上传
if (file.size <= blockSize) {
// 上传文件
this.sendBinary(binary)
} else {
// 记录分割后的文件的顺序，后端按照顺序进行拼接
let num = 1
// 文件的标识，可以随机生产一个随机数，带有这个标识的是同一个文件
const id = new Date().getTime()
// 当前分割的文件的位置，初始为单个拆分文件的大小
let nextSize = blockSize
// 循环到分割文件的位置是文件的大小截止
while (file.size > nextSize) {
// 当前分割的文件的位置，因为在最后一个的时候不一定是2M大小的文件，最后一个位置是文件的大小
nextSize = Math.min(num * blockSize, file.size)
// 分割文件，上一次的位置到当前文件的位置
const slice = binary.slice((num - 1) * blockSize, nextSize)
// 开始上传
const param = new FormData()
// 传一个文件的序号
param.append('chunk', num)
// 传分割后的文件
param.append('slice', slice)
// 传文件的唯一标识
param.append('id', id)
// 如果是最后一次，传给后端一个结束的标志
if (num * blockSize >= file.size) {
param.append('status', 'end')
}
num++
// 发送请求
this.sendFileSlice(param)
}
}
}
Más tarde descubrieron que todavía hay problemas, consulte la documentación de la interfaz sólo se sabe que después de este tipo de segmentación es volver aceptado en el extremo posterior de tipos de archivos, emmm no hay manera, me encontré con un constructor de archivos, y puede crear un objeto de archivo por ArrayBuffer . MDN luego ir a buscar el documento.
var myFile = new File (bits, el nombre [, opciones]);
Bits: ArrayBuffer, ArrayBufferView, gota, o objetos DOMString Array - o una combinación de cualquiera de estos objetos. Esta es UTF-8 archivos de contenido codificado.
Nombre: USVString, representa un nombre de archivo o la ruta del archivo.
Esto no pone a conseguir un pase rebanada en el pasado como, entonces yo
const data = new File(slice, 'test.txt')
A continuación, un error
Uncaught TypeError: Failed to construct 'File': Iterator getter is not callable.
MDN es malo, entonces pude observar detenidamente un momento su ejemplo y lo encontré pasó argumento es una matriz
var file = new File(["foo"], "foo.txt", {
type: "text/plain",
});
Lo probé en una matriz, no por orden de llegada
const data = new File([slice], 'test.txt')
Se volvió a trozos descripción es muy engañoso, mirar la versión en Inglés es más fácil de entender, y luego cambió el aspecto de su traducción en una
Consta de un objeto Array ArrayBuffer, ArrayBufferView, Blob, o DOMString - o cualquier combinación de estos objetos. Esta es UTF-8 archivos de contenido codificado.
Ahora vemos el MDN debe ser la versión de mí cambiado.
Incluso si se resuelve este problema. Hasta el momento de escribir este artículo me encontré hereda de archivos de los métodos de interfaz de un objeto blob Blob.slice , de hecho, puede tomar Archivo para cortar directa, me llevaron convertirlo en ArrayBuffer corte luego de vuelta a archivo a continuación, por lo que parece muy no es necesario. Si usted tiene las mismas necesidades los estudiantes pueden tomar directamente de corte Archivo.
Escrito en los últimos
Esto tiene que subir archivos me torturaron unos días, ya sea para comprender o para convertir los archivos de carga de archivos binarios o cortando el extremo posterior del error de haber pasado un tiempo muy largo, de hecho, ahora parece que el tiempo para escribir artículos, esta demanda es también mucho mejor que esto, nada más sobre parte de la documentación de la API, de hecho, el principio es principalmente API no se ha estudiado en esta área, además de causar una gran cantidad de problemas antes, así que sentir la necesidad de fortalecer la base de conocimientos o utilizarlo.
Entonces hay un gran problema no es la comunicación oportuna y back-end, back-end en primer lugar, y no confirmó el formato de la interfaz, no para determinar los requisitos exactos, no es un problema, pero no tenemos que pedir respuestas enterrados, no es según poner fin a ese problema, y debe comunicar sobre el back-end, se encuentra la causa del problema con mayor rapidez.