从 Vue 获取数据，将其上传到 Springboot api，并将该数据以特定格式保存到 S3

Question

我正在尝试将流的输出作为 excel 文件保存到 s3 存储桶。所有这些工作正常，但由于某种原因，当它保存流时，它全部显示在文件中的一长行上。

在 JavaScript 中有没有办法让它在每个数组元素的末尾跳过一行？

推入数组的JS代码-

// Data for s3 bucket transfer
this.s3Data.push(`Longitude: ${this.lng}, Latitude: ${this.lat}, Uncertainty Radius: ${this.uncertainty_radius} meters, Address: ${this.place_name}, Source: TEXT\n`)
this.s3Data = JSON.parse(JSON.stringify(this.s3Data))

上传代码到s3的方法-

uploadToS3() {
  axios.post("/api/v1/targetLocation/uploadLocationsToS3Bucket", this.s3Data,
      {headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer '+auth}})
},

Vue-

export default {
  data() {
    return {
      place_name: "",
      lat: '',
      lng: '',
      uncertainty_radius: 0,
      speed: 0,
      altitude: 0,
      s3Data: [],
    }
  },
}

Springboot后端-

public void uploadLocationsToS3Bucket(InputStream file) {
    try {
        BasicAWSCredentials awsCredentials = new BasicAWSCredentials(awsAccessKey, awsSecretKey);
        AmazonS3 s3Client = AmazonS3ClientBuilder
                .standard()
                .withCredentials(new AWSStaticCredentialsProvider(awsCredentials))
                .withRegion(awsRegion)
                .build();

        String fileName = connectionRequestRepository.findStream() +".xls";
        String bucketName = "downloadable-cases";
        s3Client.putObject(new PutObjectRequest(bucketName, fileName, file, new ObjectMetadata()));
    } catch (AmazonServiceException ex) {
        System.out.println("Error: " + ex.getMessage());
    }
}

public String downloadSearchData() throws IOException {
    BasicAWSCredentials awsCredentials = new BasicAWSCredentials(awsAccessKey, awsSecretKey);
    AmazonS3 s3Client = AmazonS3ClientBuilder
            .standard()
            .withCredentials(new AWSStaticCredentialsProvider(awsCredentials))
            .withRegion(awsRegion)
            .build();

    var s3Object = s3Client.getObject("downloadable-cases", connectionRequestRepository.findStream() +".xls");
    var out = new ByteArrayOutputStream();
    try (var in = s3Object.getObjectContent()) {
        in.transferTo(out);
    }
    return out.toString();
}

我想要这个的例子 -

》经度：-80.，纬度：25.，不确定半径：11.61米，地址：佛罗里达州*** 33130，美国，来源：TEXT",

Answer 1

我对这道题的理解是，目标是从front-end中取出数据，并作为CSV数据保存到s3。让我们从 front-end:

开始

this.s3Data.push({
  'Longitude': this.lng,
  'Latitude': this.lat,
  'Uncertainty Radius': `${this.uncertainty_radius} meters`,
  'Address': this.place_name,
  'Source': 'TEXT'
})

这将构建一个结构化数据数组，这正是我们想要的，因为在后端，我们可以查看数据并轻松分辨出什么是什么。这创建了一个很好的 json 结构，以后可以出于任何目的轻松使用。（尽管通常，JSON“键”（: 之前的部分）是小写字母和一个单词，但这不是必需的）。

您将 json 数据发送到 api 的代码保持不变。

现在让我们看看后端：

public void uploadLocationsToS3Bucket(InputStream file) {
    try {
        BasicAWSCredentials awsCredentials = new BasicAWSCredentials(awsAccessKey, awsSecretKey);
        AmazonS3 s3Client = AmazonS3ClientBuilder
                .standard()
                .withCredentials(new AWSStaticCredentialsProvider(awsCredentials))
                .withRegion(awsRegion)
                .build();

        // parse the json into data
        JsonNode jsonTree = new ObjectMapper().readTree(file);

        // this builder is what converts the json data to csv data
        Builder csvSchemaBuilder = CsvSchema.builder();

        // grab the names of each column from the first json object
        JsonNode firstObject = jsonTree.elements().next();
        firstObject.fieldNames().forEachRemaining(fieldName -> {csvSchemaBuilder.addColumn(fieldName);} );

        //create a "schema" using those column names
        CsvSchema csvSchema = csvSchemaBuilder.build().withHeader();
        
        // convert from json to csv, using the schema we just generated
        CsvMapper csvMapper = new CsvMapper();
        String csvData = csvMapper.writerFor(JsonNode.class)
          .with(csvSchema)
          .writeValueAsString(jsonTree);

        // note that this is not truly and excel file, but a csv file (which excel can read just fine)
        String fileName = connectionRequestRepository.findStream() +".csv";
        String bucketName = "downloadable-cases";
        // put a string instead of a stream
        s3Client.putObject(bucketName, fileName, csvData);
    } catch (AmazonServiceException ex) {
        System.out.println("Error: " + ex.getMessage());
    }
}

这应该从您的 json 输入创建 csv，您可以在 excel 中轻松使用。您还需要将 Jackson 添加到后端。我从 a tutorial 抄袭了其中的大部分内容，其中更详细地解释了其中的很多内容。

请注意，输出将是 csv 样式，因此它看起来像这样：

Longitude,Latitude,Uncertainty Radius,Address,Source
123445,32454,"1.25 meters","Some Place","TEXT"
324233,23443,"3.25 meters","Someother Place","TEXT"

从 Vue 获取数据，将其上传到 Springboot api，并将该数据以特定格式保存到 S3

Taking data from Vue, uploading it to a Springboot api, and saving that data in a specific format to S3

javascript

amazon-s3

ecmascript-6

spring-boot

vue.js