用文件调用api时验证错误

Question

我正在使用react，redux用于后端和jsx用于一个项目，该项目需要将图像文件作为用户的输入并将其发送到某个API来上传它。这是我的代码：

功能发布（请求）{

let config = request.server.app.config;
if (!imageEditClient) {
    imageEditClient = new HttpClient('imageEditClient', {
        timeout: 5000,
        connectionTimeout: 5000,
        baseUrl: `${config.get('api.baseUrl')}`
    });
}

request.log(['UploadImage payload coming from request'], request.payload);

let payload = request.payload;
let suffix = 'ImageUpload';
// let blob = new Blob([request.params.imageFile], {type: 'image/jpeg'});

let form = new FormData({maxDataSize: 20971520});

    let form = new FormData({maxDataSize: 20971520});

    const options = {
        payload,
        headers: {
            'If-Match': '*',
            'Content-Type': undefined

        }
    };

    form.append('file', request.params.imageFile);
    form.append('json', request.params.dataFile);

    return imageEditClient.post(suffix, options, form).then(mutate)
        .catch((err) => {
            err.message = `ImageEditService: ${err.message} - ${suffix}.`;
            throw err;
        });

}

我收到以下错误：

[1] "value" must be a Function
[HAPIJS]     at Object.exports.process (/Users/alnc/ha_projects/content-catalog-node-ui/node_modules/joi/lib/errors.js:181:19)
[HAPIJS]     at iterate (/Users/alnc/ha_projects/content-catalog-node-ui/node_modules/items/lib/index.js:36:13)
[HAPIJS] [2018-09-03 09:20:51,836](53611) [log] [warn] - shutting down.
[HAPIJS] Debug: internal, implementation, error 
[HAPIJS]     ValidationError: Uncaught error: {
[HAPIJS]   "_overheadLength": 206,
[HAPIJS]   "_valueLength": 26,
[HAPIJS]   "_valuesToMeasure": [],
[HAPIJS]   "writable": false,
[HAPIJS]   "readable": true,
[HAPIJS]   "dataSize": 0,
[HAPIJS]   "maxDataSize": 20971520,
[HAPIJS]   "pauseStreams": true,
[HAPIJS]   "_released": false,
[HAPIJS]   "_streams": [
[HAPIJS]     "----------------------------703740497184449347716405\r\nContent-Disposition: form-data; name=\"file\"\r\n\r\n",
[HAPIJS]     "[object Blob]",
[HAPIJS]     function () { [native code] },
[HAPIJS]     "----------------------------703740497184449347716405\r\nContent-Disposition: form-data; name=\"json\"\r\n\r\n",
[HAPIJS]     "[object Blob]",
[HAPIJS]     function () { [native code] }
[HAPIJS]   ],
[HAPIJS]   "_currentStream": null,
[HAPIJS]   "_boundary": "--------------------------703740497184449347716405",
[HAPIJS]   "value" [1]: -- missing --
[HAPIJS] }

这个错误对我来说并不清楚。任何的想法？

Answer 1

你不能使用这样的表单数据，你应该首先处理你的imageFile并从你请求的图像中生成一个blob对象，然后将你刚创建的图像的blob对象发送到表单数据对象（将这个Blob附加到你的' file'表单数据的属性，而不是直接附加请求的图像），这些函数可以帮助您为图像转换为blob作业：

      function dataURLtoBlob(dataURL) {
        const binary = atob(dataURL.split(',')[1]);
        const array = [];
        const length = binary.length;
        let i;
        for (i = 0; i < length; i++) {
          array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)]);
      }

接下来的两个函数是从你的输入图像创建一个图像并从文件读取器中获取一个dataUrl，以便在上面的函数中使用它来转换为blob进程，第一个函数是从中调用的函数您从用户输入图像的位置：

      export function processFile(file) {
        return new Promise((resolve, reject) => {
          try {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onloadend = async function() {
              const processedFile = await handleImage(reader.result);
              resolve(processedFile);
            };
          } catch (err) {
            reject(err);
          }
        });
      }

然后：

      async function handleImage(dataURL) {
        const image = new Image();
        image.src = dataURL;
        return new Promise((resolve, reject) => {
          image.onload = function() {
              resolve(dataURLtoBlob(dataURL, fileType));
          };
          image.onerror = reject;
        });
      }

对于其余的代码，如果从输入中获取图像，可以使用附加到文件输入更改的事件中的event.target.files [0]将其作为文件变量发送到上面的函数processFile中，然后将其附加到你的表格数据：第一：

  imageData = await processFile(fileData);

然后从您的表单数据代码：

  form.append('file', imageData);