vue项目,html5拍摄照片存本地,需要全部上传到WEB服务器。该怎么做?

VUE开发安卓平板项目,拍照后存在相册,最后需要一起上传到IIS环境下的Web服务器上。

单独选中一张可以上传,但无法循环或者多选上传。

您可以使用Android系统提供的MediaStore API来获取相册中的照片,并使用Volley或OkHttp等网络库将照片上传到IIS环境下的Web服务器上。以下是一个简单的实现示例:

在AndroidManifest.xml文件中添加以下权限:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

在布局文件中添加一个RecyclerView来显示相册中的照片:

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/photoRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

创建一个Photo类来表示相册中的照片:

public class Photo {
    private long id;
    private String path;

    public Photo(long id, String path) {
        this.id = id;
        this.path = path;
    }

    public long getId() {
        return id;
    }

    public String getPath() {
        return path;
    }
}

创建一个PhotoAdapter类来显示相册中的照片:

public class PhotoAdapter extends RecyclerView.Adapter<PhotoAdapter.ViewHolder> {

    private List<Photo> photoList;

    public PhotoAdapter(List<Photo> photoList) {
        this.photoList = photoList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_photo, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Photo photo = photoList.get(position);
        Glide.with(holder.itemView.getContext()).load(photo.getPath()).into(holder.photoImageView);
    }

    @Override
    public int getItemCount() {
        return photoList.size();
    }

    static class ViewHolder extends RecyclerView.ViewHolder {

        ImageView photoImageView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            photoImageView = itemView.findViewById(R.id.photoImageView);
        }
    }
}

在Activity中使用MediaStore API获取相册中的照片,并显示在RecyclerView中:

public class MainActivity extends AppCompatActivity {

    private static final int REQUEST_CODE_PICK_IMAGE = 1;

    private List<Photo> photoList = new ArrayList<>();
    private PhotoAdapter photoAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView photoRecyclerView = findViewById(R.id.photoRecyclerView);
        photoAdapter = new PhotoAdapter(photoList);
        photoRecyclerView.setAdapter(photoAdapter);

        Button pickImageButton = findViewById(R.id.pickImageButton);
        pickImageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                startActivityForResult(intent, REQUEST_CODE_PICK_IMAGE);
            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == REQUEST_CODE_PICK_IMAGE && resultCode == RESULT_OK && data != null) {
            Uri uri = data.getData();
            String[] projection = {MediaStore.Images.Media._ID, MediaStore.Images.Media.DATA};
            Cursor cursor = getContentResolver().query(uri, projection, null, null, null);
            if (cursor != null && cursor.moveToFirst()) {
                long id = cursor.getLong(cursor.getColumnIndex(MediaStore.Images.Media._ID));
                String path = cursor.getString(cursor.getColumnIndex(MediaStore.Images.Media.DATA));
                cursor.close();
                Photo photo = new Photo(id, path);
                photoList.add(photo);
                photoAdapter.notifyItemInserted(photoList.size() - 1);
            }
        }
    }
}

使用Volley或OkHttp等网络库将照片上传到IIS环境下的Web服务器上:

private void uploadPhotos(List<Photo> photoList) {
    String url = "http://your-web-server.com/upload";
    MultipartRequest multipartRequest = new MultipartRequest(url, new Response.Listener<NetworkResponse>() {
        @Override
        public void onResponse(NetworkResponse response) {
            // 上传成功
        }
    }, new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError error) {
            // 上传失败
        }
    });
    for (Photo photo : photoList) {
        File file = new File(photo.getPath());
        multipartRequest.addFile("photos", file.getName(), file);
    }
    Volley.newRequestQueue(this).add(multipartRequest);
}