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附加到到表单数据的“文件”属性中，而不是直接附加请求的图像），这些函数可以帮助您完成图像的转换为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);

使用文件调用api时发生验证错误

1 个答案: