從Vue獲取資料，將其上傳到Springbootapi，并將該資料以特定格式保存到S3

我正在嘗試將流的輸出作為 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"，

"經度：-80. ，緯度：25 . ，不確定性半徑：11.61米，地址：***，佛羅里達州33130，美國，來源：TEXT"，

"經度：-80. ，緯度：25 . ，不確定性半徑：11.61米，地址：***，佛羅里達州33130，美國，來源：TEXT"，

"經度：-80. ，緯度：25 . ，不確定性半徑：11.61米，地址：***，佛羅里達州33130，美國，來源：TEXT"，

"經度：-80. ，緯度：25 . ，不確定性半徑：11.61米，地址：***，佛羅里達州33130，美國，來源：TEXT"，

"經度：-80. ，緯度：25 . ，不確定性半徑：11.61米，地址：***，佛羅里達州33130，美國，來源：TEXT"，

uj5u.com熱心網友回復：

我對這個問題的理解是，目標是從前端獲取資料，并將其作為CSV資料保存到s3。讓我們從前端開始：

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 添加到后端。我從一個教程中抄襲了大部分內容，該教程更詳細地解釋了很多內容。

請注意，輸出將是 csv 樣式，因此它看起來像這樣：

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

標籤：javascript 弹簧靴 Vue.js 亚马逊-s3 ecmascript-6

上一篇：全面解讀 AWS Private 5G 的革新理念

下一篇：強制GlueCrawler創建單獨的表